Question

我正在尝试在我的项目https://github.com/rt2zz/react-native-drawer中使用此插件。我可以正确地运行这个例子，但是在集成它时遇到了问题。

我在方法openDrawer中遇到错误。＆＃34;无法读取undefined＆＃34;

的属性抽屉

我猜我没有按照正确的方式定义和使用该类（我是javascript OOP的新手），例如它使用React.createClass({不像我的扩展Component和有构造函数。

我班的相关代码如下。

class Search extends Component {

    constructor(props) {
        super(props);
        this.state = {
            isLoading: true,
            dataSource: new ListView.DataSource({
               rowHasChanged: (row1, row2) => row1 !== row2
            })
        };
    }

    openDrawer(){
        this.refs.drawer.open()
    }

    getInitialState(){
        return {
          drawerType: 'overlay',

        }
    }

渲染

render() {
        if (this.state.isLoading) {
            return this.renderLoadingView();
        }

        var controlPanel = <MyControlPanel closeDrawer={() => {this.refs.drawer.close()}} />

        return (


            <View>
                <View style={styles.topBar}>

                    <Drawer
                        ref="drawer"
                        >
                        <MyMainView
                          />
                    </Drawer>

                    <Text style={styles.topBarMenu}>&#9776;</Text>
                    <Text style={styles.topBarTitle}>เงินปันผล</Text>
                    <Text style={styles.topBarRight}></Text>
                </View>

Answer 1

有一种比在构造函数中放置this.openDrawer = this.openDrawer.bind(this)更好的方法用箭头函数声明openDrawer方法：

openDrawer = () => {
  this.refs.drawer.open()
}

Answer 2

我认为如果你回来使用createClass是最好的。 ES6创建类（extends）的方法与createClass相比有几个缺点：方法是未绑定的（即“this”不一定指向对象），也不能使用非常有用的mixin。未绑定的方法是您遇到的问题。您也可以解决它，以防您控制调用方法的位置并绑定方法（在javascript中查找方法绑定，例如：http://www.smashingmagazine.com/2014/01/understanding-javascript-function-prototype-bind/）

Answer 3

为了让每个人都清楚，在使用ES6 class（而不是React.createClass）时，您必须将方法绑定到构造函数中的this。

示例

class Search extends Component { constructor(props) { super(props); this.state = { isLoading: true, dataSource: new ListView.DataSource({ rowHasChanged: (row1, row2) => row1 !== row2 }) }; this.openDrawer = this.openDrawer.bind(this); //bind this to openDrawer } }

注意：我想我会添加这个答案，因为标记为正确的答案会回复到React.createClass。评论中也提到了它，但不太清楚。

这个refs在方法中未定义

3 个答案: