反应传递道具的简写

Question

我厌倦了一直这样做:

<Elem x={x} y={y} z={z} />
<Elem x={this.props.x} y={this.props.y} z={this.props.z} />

有没有办法可以让这样的东西起作用？

<Elem x, y, z />

要么

<Elem {x, y, z} />

Answer 1

如果您的变量包含在对象中,例如this.props,您传播对象:

<Elem {...this.props} />

否则,您传播包含所需变量的新对象:

<Elem {...{ x, y, z }} />

Answer 2

应该注意的是，这仅适用于对象。例如：

this.props = {
  x: 'foo', 
  y: 'bar',
  z: 'baz',
}

const {
  x,
  ...allOtherProps
} = this.props

<Elem { ...allOtherProps } /> // works (allOtherProps is an object)
<Elem { ...x } /> // does not work (x is not an object)
<Elem x={ x } /> // works

Answer 3

如注释中所指定的,您应该使用扩展运算符作为向组件发送多个参数的简写.

<Elem {...this.props} />

如果Elem组件是无状态组件,您应该能够像在组件上传递的任何参数一样访问props.this.props在这种情况下,您可能不需要使用关键字.