我厌倦了一直这样做：
<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} />
是否有传递props的 React 简写？
IT技术
reactjs
2021-05-09 02:21:37
3个回答
如果您的变量包含在一个对象中，例如this.props，则您展开该对象：
<Elem {...this.props} />
否则，您将传播一个包含您需要的变量的新对象：
<Elem {...{ x, y, z }} />
正如评论中所指定的，您应该使用扩展运算符作为向组件发送多个参数的简写。
<Elem {...this.props} />
如果 Elem 组件是无状态组件，您应该能够像在组件上传递的任何参数一样访问 props。this.props在这种情况下，您可能不需要使用关键字。
应该注意的是，这只适用于对象。例如：
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