Question

我有两个非常简单的课程。我要做的就是从另一个组件中调用一个方法，该方法将文本打印到控制台。当用户单击类2中的导航按钮时，它应该在类1中调用_printtest函数，遗憾的是，这不会发生。

第1类

 class drawerControl extends Component {

  constructor(props) {
      super(props);
      this._printtest = this._printtest.bind(this);
  };

  _printtest(){
    console.log("Hello World");
  }

  render() {
    return (
        <Home 
            openControlPanel={this.openControlPanel.bind(this)}
            functest={this._printtest}>
        </Home>
    );
  } 
}

第2类

class Home extends Component {

   constructor(props){
    super(props);
    this.callPrint = this.callPrint.bind(this);
    }
    callPrint(){
        this.props.functest()
    }

    render() {
        return (
          <TouchableHighlight onPress={this.callPrint} style=  {styles.button}>
              <Text>Navigate</Text>
          </TouchableHighlight>
        );
      } 

}

要么我得到一个错误，说“this.props.functest”不是一个函数，或者什么也没发生。这似乎应该非常简单。我该怎么做才能解决这个问题？

Answer 1

我将您的代码粘贴到一个新的react-native项目中并在我的Android手机上进行测试。

您需要将CamelCase用于自定义组件，afaik：DrawerControl
DrawerControl课程遗失openControlPanel() {}
主要问题：调用console.log()会打印到iOS控制台。您需要在终端中运行react-native log-ios才能查看输出，否则它看起来好像什么也没发生。

您提到的关于this.props.functest不是函数的错误可以通过多种方式发生，但是如果您进行了我列出的更改，则应该会发布此处发布的代码。

Answer 2

我认为问题是你的props已经是一个功能。所以你不需要像this.props.functest()那样调用它。只需简单地调用

即可

<TouchableHighlight onPress={this.props.functest}}>
    <Text>Navigate</Text>
</TouchableHighlight>

我尝试通过RNPlay根据您的代码创建一个简单的应用程序，它的工作原理。 https://rnplay.org/apps/2LJnbg

Answer 3

在你的1级变更之后。

<Home 
  openControlPanel={this.openControlPanel.bind(this)}
  functest={this._printtest()}>
</Home>

您需要致电_printtest函数

Answer 4

如果您未设置props，则无法使用它。 props只是构造函数的参数，并不是您实例的属性，意味着this.props未定义。但是，您可以在构造函数中设置this.props = props。

React Native - 无法从另一个组件调用方法

4 个答案: