React ... の意味

Question

Reactjsで出てくる...はどのような意味でしょうか？たとえば
props vs ...props
どっちでもいいのでは？と疑問に思います。何か違いがあるのでしょうか？

Answer 1

...propsのような表記をされているので、何かしらのReactのコンポーネントの実装周りのソース中に見かけたものだと推測します。
他の方も回答されているように、...はReact自体の機能ではなくJavascriptのスプレッド構文というものです。
配列などのイテレータと併用している例が多いです。

例えばhoge,fuga,puniという3種類のプロパティを持つ<Test>というコンポーネントに対して

const props = {
  hoge : "hogehoge",
  fuga : 100,
  puni : false
};

// ...略

<Test hoge={props.hoge} fuga={props.fuga} puni={props.puni} />

のように指定していたものを

const props = {
  hoge : "hogehoge",
  fuga : 100,
  puni : false
};

// ...略

<Test {...props} />

のように記述することができます。
単にプロパティの記述を短縮するだけでなく、オブジェクトや配列の複製・合成に使うことも多いため、基本的な部分だけでも覚えておくと何かと便利かと思います。

Comments

[tsugumi_7788]

ありがとうございました。すごくわかりやすかったです。

Answer 2

スプレッド構文
Reactは関係ありません

Comments

[tsugumi_7788]

ありがとうございました

Answer 3

どっちでもいいのでは？と疑問に思います。何か違いがあるのでしょうか？

意味は違いますので、使い分ける必要があります。

（具体的な場面の提示がないと、それぐらいしか言えません）

Comments

[tsugumi_7788]

ありがとうございました。