反应：无法添加属性“X”，对象不可扩展

Question

我在我的组件中接收道具。我想在此组件中添加一个带有道具的属性“LegendPosition”。我不能那样做。请帮我做这个。我已经尝试过此代码，但没有成功：

var tempProps     = this.props;
tempProps.legendPosition = 'right';
Object.preventExtensions(tempProps);

console.log(tempProps);

Answer 1

我想把更新的道具发送到一个子组件，如果不复制或克隆到一个新对象是可能的，请帮助我如何实现这一点。

解决方案简单如：

<ChildComponent {...this.props} legendPosition="right" />

当然，legendPosition将通过this在ChildComponent中提供。道具。legendPosition。

当然，前面的是这样的。道具可以包含已存在的legendPosition属性/值，这些属性/值将被以后定义的顺序事项覆盖。

当然，可以有许多扩展运算符——对于多个属性、逻辑块...无论什么：

const additonalProps = {
  legendPosition: 'right',
  sthElse: true
}
return (
  <ChildComponent {...this.props} {...additonalProps} />
)

Answer 2

道具是不可变的，你不能“添加”任何东西。如果你想“复制”它们，那么你需要这样做

const tempProps = {...this.props};

我能看到你需要添加更多道具的唯一原因是把它传递给一个孩子，但是你可以不把它添加到道具对象中。

编辑：添加道具与额外的道具

<Component {...this.props} legendPosition="right" />

Answer 3

您不能修改this.props。这里temProps是this.props的引用，所以它不起作用。您应该使用JSON. parse（）和JSON. stringify（）创建一个props的副本

var tempProps = JSON.parse(JSON.stringify(this.props));
tempProps.legendPosition = 'right';
Object.preventExtensions(tempProps);

console.log(tempProps);

为了更好和有效的方法来深度克隆对象，请参阅JavaScript中深度克隆对象的最有效方法是什么？