web-dev-qa-db-ja.com

反応状態内の支柱の破壊

小道具と状態の破壊を促進するeslintのairbnb構成を追加しました

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

エラーが発生します

[eslint]破壊の小道具割り当てを使用する必要があります（react/destructuring-assignment）

ここで小道具からactiveを正しく分解する方法がわかりませんか？通常、const {active} = this.propsは動作しますが、状態内またはその周辺に配置すると、予期しない構文エラーが発生します。

javascriptreactjseslint
11
Ilja

クラスプロパティ内に保持する唯一の方法は、ゲッター（最初のレンダリングで呼び出されます）を使用することです。

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 };

}

しかし、私は個人的にはこの警告を無視します。

10
Jonas Wilms

このルールを.eslintrc.jsonに追加できます

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