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

Question

I am trying to make a AndroidDrawer using DrawerLayoutAndroid and ToolbarAndroid of react-native. When the hamburger icon on the toolbar is clicked, the drawer should open.

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

//Another file exported as Toolbar

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

    this.props.drawer.openDrawer();

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

But when I press on the toolbar icon it says undefined is not a function for "_this2.props.drawer.openDrawer" .

Alternatively when I make a method as

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

}

and then pass it as props to Toolbar as drawer=this.openMyDrawer.bind(this) and then call it from Toolbar as this.props.openMyDrawer it works just fine...

Can someone explain why undefined is passed when I directly pass reference to Toolbar as objects are passed as reference not by value, as soon as this.drawer gets a value that value should be reflected down to its children or siblings for that matter.

Answer 1

The layout function isn't causing a re-render, so when you rendered Toolbar your this.drawer was undefined since the layout function wasn't called at this point. Your other method worked because this.drawer was evaluated at the moment the function ran (button pressed) and not when the component was rendering.

To pass the ref as a prop, you would have to trigger another render, ideally by putting the ref in the state. Like this:

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

You should take into account that the drawer ref will be undefined for in Toolbar 's first render.