使用传播运算符传递道具

代替

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'