Reactjs eslint规则必须使用解构状态分配

Question

class MyDrawer extends Component {
  const modalOpen = this.state;

  render() {
    return (
      <div>
        <Drawer
          modal
          open={this.state.modalOpen} // <-- this line show error [eslint] Must use destructuring state assignment (react/destructuring-assignment)
          onClose={() => this.setState({ modalOpen: false })}
        >
        </Drawer>
      </div>
    );
  }
}

export default MyDrawer;

我尝试将行更改为，const { modalOpen } = this.state;但现在无法编译。

如何遵循规则并编辑代码以成功编译？

Answer 1

const在错误的地方。只能在内部声明类成员class MyDrawer extends Component {...}，并且const不允许在其中声明。销毁分配应驻留在应具有变量的函数中：

  render() {
    const { modalOpen } = this.state;

    return (
      <div>
        <Drawer
          modal
          open={modalOpen}
          onClose={() => this.setState({ modalOpen: false })}
        >
        </Drawer>
      </div>
    );
  }