Question

在本地反应中，如果想要孩子调用父母的功能，我可以执行以下操作：

在父母：

<Child myFunc={this.handleChildFunc.bind(this)} />

孩子会这样称呼这个函数：

onpress=this.props.myFunc();

如何通过passProps在Navigator和NavigatorIOS中实现此目的？

<NavigatorIOS
    initialRoute={{
      component: MyScene,
      title: 'My Initial Scene',
      passProps: { myProp: this.handleChildFunc.bind(this) }  // Not work
      passProps: { myProp: ()=>this.handleChildFunc.bind(this) }  //Not work
    }}
    style={{flex: 1}}
  />

更新

谢谢你的回复，但我是新来回应原生的，不知道如何在navigatorIOS中实现以下答案。但是，我尝试了以下内容，孩子可以成功调用父母的功能

在父级中，将回调作为道具传递

passProps: { parentFunc: ()=>this.handleFunc() }

在孩子身上

this.props.handleFunc();

Answer 1

此代码适用于我

return(
    <NavigatorIOS
        initialRoute={{
          component: MyScene,
          title: 'My Initial Scene',
          myProp: (() => { this.handleChildFunc.bind(this) }) // work
        }}
        renderScene={ (route, navigator) =>
          <Child navigator={navigator} {...route.passProps} onFun={ route.myProp } /> 
        }
      />
)

小孩打电话

this.props.onFun()

Check here

Answer 2

有demo，也许有帮助。

renderScene函数示例：

renderScene(route, navigator) {
  let Component = route.component;
  return <Component {...route.params} navigator={navigator} />
}

推送新场景的示例：

this.props.navigator.push({
  component: Child,
  func: customFunc
})

然后您可以在子页面（辅助页面）中使用this.props.func。

React native如何将父函数传递给子元素

2 个答案: