Reactjs 传递道具有速记吗？

我厌倦了一直这样做：

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

有没有办法让这样的东西发挥作用

<Elem x, y, z />

或

---

如注释中所述，应使用a作为向组件发送多个参数的简写

---

如果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

this.props={
x:‘foo’，
y:'酒吧'，
z:‘baz’，
}
常数{
x,，
…道具
}=这是道具
//作品（allOtherProps是一个对象）
//不工作（x不是对象）
//工作

如果变量包含在对象中，例如

this.props

，则将对象展开：

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

否则，将传播一个包含所需变量的新对象：

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

您是否尝试过

。它适用于有状态。但是如果我有像constelem（{x，y，z}）这样的无状态组件呢？它没有这个道具。另外，如果我只想传递特定的道具，而不是全部道具，那该怎么办？我认为同样的逻辑也适用于无状态组件（它们仍然可以接收道具-您可以通过在组件的构造函数方法中记录

this.props

来检查这一点）。关于你的第二个问题——在这种情况下，你需要手动传递它们。或者，您可以将所需的道具提取到一个单独的变量中，并使用spread操作符将其传递给组件<代码>{…this.extractedProps}无状态甚至有构造函数吗？这是一个很好的建议，谢谢！不完全是因为这些都是函数。但不管怎么说，给他们提供的道具基本上都是论点。您应该能够像任何普通函数一样直接在组件中访问这些参数。我将更新注释

{…allOtherProps}

-误导将此计算为对象分配。如果在您只提供一个对象并立即展开它时，它只创建一个新对象，那会更好

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