[解決済み] Reactjsの{...this.props}の意味は何ですか？

質問

の意味は何ですか？

{...this.props}

という風に使おうとしているのですが

 <div {...this.props}> Content Here </div>

どのように解決するのですか？

これは 属性が広がっています。 と呼ばれるもので、その目的は小道具の受け渡しを容易にすることです。

N 個のプロパティを受け付けるコンポーネントがあるとします。数が増えれば、これらを渡すのは面倒で扱いにくくなります。

<Component x={} y={} z={} />

このように、代わりにオブジェクトにラップして、スプレッド表記を使うのです。

var props = { x: 1, y: 1, z:1 };
<Component {...props} />

で、これをコンポーネントの props に解凍します。 {... props} の中で render() 関数の中で、プロップスを他のコンポーネントに渡すときだけ使用します。展開されたプロップは通常通り使用します this.props.x .