使用傳播運算子傳遞道具

代替

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

如果需要將每個屬性作為單個 prop 值傳遞，則可以使用 ES6 中支援的擴充套件運算子 ... 來傳遞所有值。該元件現在看起來像這樣。

var component = <Component {...props} />;

請記住，傳入的物件的屬性將複製到元件的 props 上。

訂單很重要。後來的屬性覆蓋以前的屬性

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

另一種情況是你也可以使用擴充套件運算子只將部分道具傳遞給子元件，然後你可以再次使用道具的解構語法。

當兒童元件需要大量道具但不想一個接一個地傳遞它時，它非常有用。

 const { foo, bar, other } = this.props // { foo: 'foo', bar: 'bar', other: 'other' };
 var component = <Component {...{foo, bar}} />;
 const { foo, bar } = component.props
 console.log(foo, bar); // 'foo bar'