これは Spread Attributes(スプレッド構文) といって ES6 Javascript での記法です。Spread syntax (...)
意味としては以下のコードと同じ意味合いとなります。
const obj = {
id:1,
name: 'John',
email: 'john@test.local',
}
console.log( obj );
console.log( {...obj} );
結果
{ id: 1, name: 'John', email: 'john@test.local' }
{ id: 1, name: 'John', email: 'john@test.local' }
const props = { foo: "foo", bar: "bar" };
render() {
return <Child foo={props.foo} bar={props.bar} />
}
↓
const props = { foo: "foo", bar: "bar" };
render() {
return <Child {...props} />
}
子コンポーネントに渡したい値に変更があった場合に変更箇所が少なくて済みます。
props に hogee を追加する場合でも提示する箇所のみの変更でokです。
const props = { foo: "foo", bar: "bar", hoge:"hoge" };
render() {
return <Child {...props} />
}