reactjs - 使用 ref prop 时 undefined 不是对象（评估 _this2_.drawer.open）

Question

我一直在尝试按照这些文档的建议使用 ref 道具让 react-native-drawer 工作，但我收到以下错误：undefined is not an object (evaluating _this2_.drawer.open)我已经梳理了堆栈溢出的类似问题，并且很难将此错误文本连接到任何一个问题，为什么会这样？

import React, { Component } from 'react';
import Drawer from 'react-native-drawer'
import {
   AppRegistry,
   StyleSheet,
   Text,
   View,
   Button
 } from 'react-native';


 class Project extends Component {
   closeDrawer = () => {
     this._drawer.close()
   };
   openDrawer = () => {
    this._drawer.open()
   };
   render () {
      return (
       <Drawer
         ref={(ref) => this._drawer = ref}
         content={<Menu
                    close={this.closeDrawer()}
                    />}
          >
        <Main
          open={() => {this.openDrawer()}}
          />
        </Drawer>
      )
    }
  }

  class Menu extends Component {
    render() {
      return (
        null
      );
    }
  }

  class Main extends Component {
    render() {
      return (
      <View>
         <Button
           title='Open'
           onPress={this.props.open}
           />
       </View>
     )
   }
 }
 AppRegistry.registerComponent('Project', () => Project); 

Answer 1

您不能在回调中使用“this”。您应该在类中定义方法，然后调用它们。

  closeControlPanel = () => {
    this._drawer.close()
  };
  openControlPanel = () => {
    this._drawer.open()
  };

然后像

<Drawer
     ref={(ref) => this._drawer = ref}
     content={<Menu
                close={this.closeControlPanel()}
                />}
      >
    <Main
      open={() => {this.openControlPanel()}
      />
    </Drawer>

还，

class Main extends Component {
    render() {
      return (
      <View>
         <Button
           title='Open'
           onPress={this.props.open}
           />
       </View>
     )
   }
 }