Question

我是反应原生的新手，我尝试使用ES 6 Class重构旧的反应源代码，但是我得到了一个错误＆＃39;无法读取属性＆＃39;关闭＆＃39;未定义的＆＃39;。任何人都可以帮助我为什么closeDrawer中的this.refs.drawer未定义？

closeDrawer = () => {
   applicationActions.setDrawerStatus(false);
   this.refs.drawer.close();
}

openDrawer = () => {
   applicationActions.setDrawerStatus(true);
   this.refs.drawer.open()
}

setDrawerState(value) {
   this.setState({ isDrawerOpened: value });
}

render() {
   return (
     <Drawer ref="drawer"
       type="static"
       openDrawerOffset={DRAWER_OFFSET}
       panOpenMask={.5}
       onOpen={() => this.setDrawerState(true).bind(this)}
       onClose={() => this.setDrawerState(false).bind(this)}
       content={<DrawerScene closeDrawer={this.closeDrawer().bind(this)} />}  >

       <MainView
          drawerStatus={this.isDrawerOpened}
          closeDrawer={this.closeDrawer().bind(this)}
          openDrawer={this.openDrawer().bind(this)}
       />
     </Drawer>
  );
}

此致

Answer 1

编辑我没有注意到您在组件的成员函数中使用了箭头函数，因此您不需要bind它们。还有一些其他问题，但

这是一个具有约束力的问题。这应该有效：

closeDrawer = () => {
   applicationActions.setDrawerStatus(false);
   this.refs.drawer.close();
}

openDrawer = () => {
   applicationActions.setDrawerStatus(true);
   this.refs.drawer.open()
}

setDrawerState(value) {
   this.setState({ isDrawerOpened: value });
}

render() {
   return (
     <Drawer ref="drawer"
       type="static"
       openDrawerOffset={DRAWER_OFFSET}
       panOpenMask={.5}
       onOpen={() => this.setDrawerState(true)}
       onClose={() => this.setDrawerState(false)}
       content={<DrawerScene closeDrawer={this.closeDrawer} />}  >

       <MainView
          drawerStatus={this.isDrawerOpened}
          closeDrawer={this.closeDrawer}
          openDrawer={this.openDrawer}
       />
     </Drawer>
  );
}

您的代码存在的问题是您正在将bind应用于函数调用的结果。例如，当您执行this.setDrawerState(true).bind(this)时，将调用该函数，返回适当的值，然后将bind应用于该函数。这通常会导致错误，但在这里您还尝试访问尚未设置的ref（因为在此之前，必须先评估所有prop值，然后再将其传递给新组件，这正是这里的问题，在实例化组件之前调用该函数。）

只是让您对bind了解更多：它是函数对象的属性，因此您需要从对该函数的引用（在本例中为其名称）访问它。 bind的结果是一个与原始函数具有相同行为的新函数，除了新的this值或您传递的任何其他参数。

Answer 2

尝试像这样设置ref而不是字符串：

drawer = null;
closeDrawer = () => {
   applicationActions.setDrawerStatus(false);
   this.drawer.close();
}

openDrawer = () => {
   applicationActions.setDrawerStatus(true);
   this.drawer.open()
}

setDrawerState(value) {
   this.setState({ isDrawerOpened: value });
}

render() {
   return (
     <Drawer ref={((component)=> this.drawer=component)}
       type="static"
       openDrawerOffset={DRAWER_OFFSET}
       panOpenMask={.5}
       onOpen={() => this.setDrawerState(true).bind(this)}
       onClose={() => this.setDrawerState(false).bind(this)}
       content={<DrawerScene closeDrawer={this.closeDrawer().bind(this)} />}  >

       <MainView
          drawerStatus={this.isDrawerOpened}
          closeDrawer={this.closeDrawer().bind(this)}
          openDrawer={this.openDrawer().bind(this)}
       />
     </Drawer>
  );
}

React ES 6 Classes refs

2 个答案: