react.dev/docs/02.2-jsx-spread.ja-JP.md

id	title	permalink	prev	next
jsx-spread	JSXの拡張属性	jsx-spread-ja-JP.html	jsx-in-depth-ja-JP.html	jsx-gotchas-ja-JP.html

以下のように、コンポーネントにどのようなプロパティを配置したいか前もって全て分かっている場合は、JSXを使うことは簡単です。

  var component = <Component foo={x} bar={y} />;

Propsを変更してはいけない

セットしたいプロパティが分からない場合は、以下のように後からオブジェクトに追加したいと思うでしょう。

  var component = <Component />;
  component.props.foo = x; // だめ
  component.props.bar = y; // 同様にだめ

これはアンチパターンです。なぜなら、後々まで正しいpropTypesであるかどうかチェックすることを助けることができないことを意味するからです。これは、propTypesのエラーが隠されたスタックトレースに出力されて終わってしまうことを意味します。

propsは変更不可と考えられるべきです。propsのオブジェクトをどこかで変更することは予期せぬ結果を発生させる可能性があるので、理想的には、この時点ではpropsは固定のオブジェクトであるべきです。

拡張属性

以下のように、拡張属性というJSXの新しい特徴を使うことができます。

  var props = {};
  props.foo = x;
  props.bar = y;
  var component = <Component {...props} />;

あなたが渡したオブジェクトのプロパティはコンポーネントのpropsにコピーされます。

これを複数回使用したり、他の属性と組み合わせたりすることもできます。仕様書では、順序が重要となっています。後の属性は前の属性をオーバーライドします。

  var props = { foo: 'default' };
  var component = <Component {...props} foo={'override'} />;
  console.log(component.props.foo); // 'override'

奇妙な ... という表現は何でしょうか？

... 操作（拡張操作）は既にES6のarraysでサポートされています。Object Rest と Spread PropertiesのES7のプロポーザルもあります。JSXのきれいなシンタックスを供給するために、それらのサポートや開発中の標準使用を利用しています。