如何从子级调用父函数 - react-native

IT技术 javascript reactjs react-native react-native-android react-native-ios
2021-05-15 19:51:39

我正在努力寻找解决我的问题的方法，但我在任何地方都找不到。所以我的问题是如何从 child 调用父函数。该函数必须在孩子内部的onPress={()} 中传递

父.js

   constructor(props) {
    super(props);
    this.state = { loading: true };
    this.state = { active: 'active' };
    this.openDrawer = this.openDrawerButtonFunction.bind(this);
    this.callParent = this.callParent.bind(this)

       }

     callParent = () => {
     console.log('I am your father')   }

儿童.js

     <Avatar
      avatarStyle={{ height: 50 }}
      onPress={() => { this.onPressAvatar() }}
      source={require('../../assets/images/dav-r.jpeg')} />

      onPressAvatar = () => {
      console.log('press on avatar');
        this.props.callParent.bind(this)

}

3个回答

这是一个常见的误解，所以你很好。

您将利用Props来完成将父函数调用到子函数。

自然地，孩子不知道父母的职能。当您需要在子 Component 中执行某些操作并将其冒泡到父函数时，您只需将该函数作为 prop 传递即可。

例子

父组件.js

...

doSomething(x){
   console.log(x);
}

render(){
   return(
      <ChildComponent functionPropNameHere={this.doSomething}/>
   )
}

子组件.js

someFunctionInChildComponent(){
   this.props.functionPropNameHere('placeholder for x');
}

当您运行该函数时someFunctionInChildComponent()，它将调用被Prop调用者functionPropNameHere，然后移动到父组件以在那里调用该函数。输入x将placeholder for x在此示例中。

在父渲染函数中 

parentfunction(info){
   alert(info)
}


render(){
      return(
       //bla bla bla
       <Child functionToPass={this.parentfunction}/>
       //bla bla bla
      )
    }

在孩子

callparentfunction(){
this.props.functiontoPass('Hello from the child')
}

您必须将父函数作为props传递给子函数。更多信息在这里

其它你可能感兴趣的问题
上一篇如何使用电子react样板正确设置材料用户界面 下一篇从react组件访问环境变量