如何从父组件调用DrawerLayoutAndroid上的openDrawer函数？

Question

我已经做了一个组件，设置DrawerLayoutAndroid，我想在我的索引文件中调用。

drawer.js：

export default class MenuDrawer extends Component { 
    constructor(props) { 
     super(props); 
     this.openDrawer = this.openDrawer.bind(this); 
    } 
    render() { 
     var navigationView = (
      // ... 
     ); 
     return (
      <DrawerLayoutAndroid 
       ref={(_drawer) => this.drawer = _drawer} 
       drawerWidth={200} 
       drawerPosition={DrawerLayoutAndroid.positions.Left} 
       renderNavigationView={() => navigationView}> 
      {this.props.children} 
      </DrawerLayoutAndroid> 
     ); 
    } 
    openDrawer() { 
     this.drawer.openDrawer(); 
    } 
} 

然后我在我的索引文件渲染（）函数缠，因为我想要的抽屉是从任何地方访问一切。我只是无法弄清楚如何从索引文件打开抽屉。我尝试了几种不同的方法来调用函数，但我总是最终得到未定义的不是对象。

index.android.js

export default class AwesomeProject extends Component { 
    constructor(props) { 
     super(props); 
     this.openMenu = this.openMenu.bind(this); 
    } 

    render() { 
     const { region } = this.props; 
     return (
      <MenuDrawer 
       ref={(_menudrawer) => this.menudrawer = _menudrawer} 
       style={styles.layout}> 
       <TouchableHighlight 
        style={styles.topbar} 
        onPress={this.openMenu}> 
       <Text>Open</Text> 
       </TouchableHighlight> 
      </MenuDrawer> 
     ); 
    } 

    openMenu() { 
      this.refs.menudrawer.openDrawer(); 
    } 
} 

这给我的错误 “undefined是不是（评估 'this.refs.menudrawer.openDrawer'）的对象”。

我该如何解决这个问题？

感谢

Answer 1

它看起来不错，你只是访问menudrawer不正确。它应该是：

this.menudrawer.openDrawer(); 

因为你的裁判是：

ref={(_menudrawer) => this.menudrawer = _menudrawer}