Question

我一直试图通过使用建议 by these docs的ref prop来使反应原生抽屉工作但是我收到以下错误：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>
     )
   }
 }

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

1 个答案: