使用带有额外道具的传播道具

Question

我如何追加其他财产？我有一个反应组件，其中有人传入...道具，我想附加一个额外的道具

 <AccountsStatus {...props} />

Answer 1

只需添加序列：

<AccountsStatus {...props} otherProp={true} />

或者您可以克隆道具，将其他道具添加到克隆中，然后执行：

<AccountsStatus {...newProps} />

但我不建议这样做，你需要一个lib来克隆该对象。

Answer 2

更简洁的方法是基于使用an object spread operator：

<AccountsStatus {...{...props, extraProp: extraValue}} />

为了能够使用它，您需要配置Babel以使用transform-object-rest-spread插件。

Answer 3

请记住，传递道具的顺序将决定将哪个值传递给该组件。如果有两个具有相同名称的键，则适用。

例如：

<AccountsStatus extraProp={extraValue} {...props} />

和

<AccountsStatus {...props} extraProp={extraValue} />

看起来一样，但在第一个示例中，如果您正在传播包含props键的extraProp对象，它将覆盖您之前传递的extraProp值。< / p>

Answer 4

只需在传播运营商上方发送道具：

<AccountsStatus
    otherProp={otherPropValue}
    {...props}
/>

请记住，始终在展开道具上方指定它。如果您在道具中传递具有相同名称的道具，您可能想要覆盖它。 您可以在this article中阅读有关道具的更多信息，它涵盖了很多方式，了解了某些类型的道具是如何通过的。