Question

我正在开发我的第一个应用程序并仍在学习流程。所以假设我有一个名为：

的组件

包含方法HelloWorld（）的Parent，如下例所示：

import React, { Component } from 'react';

class Parent extends Component {
    Helloworld() {
        console.log('Hello world');
    }

    render () {
        return (
            <View>{this.props.children}</View>
        )
    }
}

module.exports = Parent;

然后我想将其导入到另一个组件并使用其方法然后我该怎么做？我写了另一个关于如何实现它的简短例子。

import React, { Component } from 'react';

import { Parent } from 'path to parent'; 
//or
const Parent = require('path to parent');
//which of these is better?

class Home extends Component {
    Helloworld() {
        console.log('Hello world');
    }

    render () {
        return (
            <Parent>
                // this is what i need
                <Button onClick={parent.Helloword()}>Some Button</Button>
            </Parent>
        )
    }
}

module.exports = Home;

先谢谢你的帮助。

Answer 1

通常你应该通过道具将信息从父母传递给孩子。

parent.jsx：

import Child from './child';

class Parent extends Component {
    constructor(props) {
        super(props);

        this.helloWorld = this.helloWorld.bind(this);
    }

    helloWorld() {
        console.log('Hello world!');
    }

    render() {
        return (
            <View><Child method={this.helloWorld} /></View>
        );
    }
}

child.jsx：

class Child extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <Button onClick={this.props.method} />
        );
    }
}

修改：关于import和require之间的偏好，我认为这是一个品味问题，但我认为import更清晰。

Answer 2

您可以阅读有关import的{{3}}。和React Native-Tutorial-What's going on here?

Answer 3

我们可以在子类中传递道具：然后从孩子那里调用它： this.props.propName（） 我们可以在 prop

中传递字符串，数字，函数，数组，对象

import React from 'react';
import {
  View,
  Text,
} from 'react-native';

var Parent = React.createClass({   
  render: function() {
    return (
      <Child foo={()=>this.func1()} bar={()=>this.func2()} />
    );
  },
  func1: function(){
    //the func does not return a renderable component
    console.log('Printed from the parent!');
  }
  func2: function(){
    //the func returns a renderable component
    return <Text>I come from parent!</Text>;
  }
});

var Child = React.createClass({   
  render: function() {
    this.props.foo();
    return (
      <Text>Dummy</Text>
      {this.props.bar()}
    );
  },
});

module.exports = Parent;

从子进程调用父组件的方法 - React Native

3 个答案: