在React-Native中将道具作为ref和方法传递给子代或同级

Question

我试图使用react-native的DrawerLayoutAndroid和ToolbarAndroid制作一个AndroidDrawer。 单击工具栏上的汉堡包图标时，应打开抽屉。

<DrawerLayoutAndroid ref={(element) => {
      this.drawer=element;
    }}
          drawerWidth={300}
          drawerPosition={DrawerLayoutAndroid.positions.Left}
          renderNavigationView={() => navigationView}>
          <Toolbar toolbarText="XYZ" drawer={this.drawer}/>
</DrawerLayoutAndroid>

//另一个文件导出为工具栏

<ToolbarAndroid
  navIcon={DrawerIcon}
  onIconClicked={() => {

    this.props.drawer.openDrawer();

  }}
    title={this.props.toolbarText}
    style={[styles.toolbar,{backgroundColor:col}]}
    />

但是，当我按工具栏图标时，它说undefined不是“ _this2.props.drawer.openDrawer”的函数 。

或者当我做一个方法

openMydrawer(){
this.drawer.openDrawer();

}

然后将其作为道具传递给Toolbar，方式为drawer=this.openMyDrawer.bind(this) ，然后从工具栏中调用this.props.openMyDrawer作为它，效果很好...

有人可以解释为什么当我直接传递对工具栏的引用时会传递undefined的原因，因为this.drawer获得一个值后，该值应该直接反映给它的子级或同级，因为对象不是按值传递。

Answer 1

布局功能不会引起重新渲染，因此，在渲染Toolbar时，由于此时尚未调用布局功能，因此this.drawer定义。 您的其他方法之所以this.drawer是因为this.drawer是在函数运行（按下按钮） this.drawer不是在渲染组件时评估的。

要将ref作为道具传递，您必须触发另一个渲染，最好是将ref置于状态。 像这样：

render() {
    <DrawerLayoutAndroid 
            ref={(element) => this.setState({drawer:element})}
            drawerWidth={300}
            drawerPosition={DrawerLayoutAndroid.positions.Left}
            renderNavigationView={() => navigationView}>
            <Toolbar toolbarText="XYZ" drawer={this.state.drawer}/>
    </DrawerLayoutAndroid>
}

您应该考虑到在Toolbar的第一个渲染中将没有定义抽屉引用。