支持反应状态内部的解构

Question

我为eslint添加了airbnb配置,鼓励支持和状态解构,我喜欢它,但在我的组件中定义状态时偶然发现了一个问题

class MyComponent extends Component {
  state = {
    animation: this.props.active ? 1 : 0
  }

我收到一个错误

[eslint]必须使用解构道具赋值(反应/解构 - 赋值)

我不确定如何active在这里正确地解构道具呢？通常const {active} = this.props可以工作,但每当我把它放在状态或周围时我都会出现意外的语法错误.

Answer 1

将它保留在类属性中的唯一方法是使用getter(将在第一次渲染时调用):

state = {
  get animation() {
    const { active } = this.props;
    return active ? 1 : 0;
  }
}

或者您使用IIFE初始化属性:

state = (() => {
  const { active } = this.props;
  return { animation: active ? 1 : 0 };

})()

但这实际上有点过于复杂.另一种解决方案是将属性移动到构造函数中:

constructor(...args) {
 super(...args);

 const { active } = this.props;
 this.state = { animation: active ? 1 : 0 };

}

但我个人会在这里忽略这个警告.

Answer 2

您可以将此规则添加到 .eslintrc.json

"rules": {
    "react/destructuring-assignment": [
      "error",
      "always",
      {
        "ignoreClassFields": true
      }
    ]
  },