react {...props}

Question

reactで

{...props}

という記述が出てきますがこれはどういう意味でしょうか？

Answer 1

JavaScriptの新仕様(ES2015)で追加された書き方ですね。
正式名称はspread (...) operatorです。
http://kangax.github.io/compat-table/es6/

オブジェクト宣言、配列宣言、関数実行…に使えます。
下記のようなケースで威力を発揮します。

const origin = {
  foo: 123,
  bar: 234
};
const copied = {...origin};
console.log(copied);
// {foo: 123, bar: 234}

// barを345の数値にしたいんだけどなぁ…
const data1 = {...origin, bar: 345};
console.log(data1);
// {foo: 123, bar: 345} <- ちゃんと上書きされてる！
console.log(origin);
// {foo: 123, bar: 234} <- 元のデータも維持されてる！

// Object.assignでもほぼ同じ事が出来るよ、
// でも記述量は増えるし、このメソッドの実装もES2015系だから実践でこちらを採用するケースはあまりないかも
const data2 = Object.assign({}, origin, {bar: 345});
console.log(data2);
// {foo: 123, bar: 345} <- ちゃんと上書きされてる！
console.log(origin);
// {foo: 123, bar: 234} <- 元のデータも維持されてる！

ES5相当で同じ事をしたければ大変です。
オブジェクトや配列は参照になるので、シャローコピーが難しいのです。

var origin = {
  foo: 123,
  bar: 234
};

var data = {};
for (var key in origin) {
  data[key] = origin[key];
}
data.bar = 345;
console.log(data);
// {foo: 123, bar: 345} <- ちゃんと上書きされてる！
console.log(origin);
// {foo: 123, bar: 234} <- 元のデータも維持されてる！

Comments

[cheche0830]

あ、reactの記述ではなくjsの記述方法だったのですね！ありがとうございました！！

Answer 2

https://reactjs.org/docs/jsx-in-depth.html#spread-attributes
Spread Attributesと呼ばれるものです。平たく言うと「オブジェクト」をタグのアトリビュートの部分に展開する文法です。

よく見ると、それ以外にも「オブジェクトからプロパティを抜き出すときに、余りの部分を受け取る」文法でもあるようです。

Comments

[cheche0830]

ありがとうございます。省略した書き方ってことですね。