3

拡張するES6クラスReact.Component、つまりReactコンポーネントがあります。私のコンポーネントが次のようになっているとしましょう：

class MyComponent extends React.Component {
  constructor({ foo, bar, baz, ...props }) {
    super({ foo, bar, baz, ...props });
    this.state = { foo, bar, baz };
  }

  render() {
     return <span>Foo: {this.state.foo} Bar: {this.state.bar} Baz: {this.state.baz}</span>
  }
}

ここでは、コンストラクターのシグネチャで構造破壊を使用して、コンポーネントの状態で使用したい小道具をいくつか引き出しています。これらの値を必ず super に渡します。ただし、実際に同様のコードを実行すると、次のような警告が表示されます。

警告: MyComponent(...): で super() を呼び出すときはMyComponent、コンポーネントのコンストラクターが渡されたものと同じ props を渡すようにしてください。

私の質問は、関連する警告なしで示したように、コンストラクターの署名を分解できるかどうかです。(警告には正当な理由があると思いますが、その意味を完全には理解していないことも同様に確信しています。)

4

1 に答える 1

5

React ソース コードのこの行を見ると、props オブジェクトが一致するかどうかを確認するための浅いチェックが行われていることがわかります。

// other stuff

var propsMutated = inst.props !== publicProps;

// other stuff

warning(
  inst.props === undefined || !propsMutated,
  '%s(...): When calling super() in `%s`, make sure to pass ' +
  'up the same props that your component\'s constructor was passed.',
  componentName, componentName
);

スーパーに渡したときに小道具のクローンを作成したため、警告が発生します。

于 2016-11-08T03:04:05.870 に答える