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

Question

我正在组件中接收道具。我想在此组件中添加带有道具的属性“ LegendPosition”。我无法做到这一点。请帮我解决一下这个。我已经尝试过此代码，但没有成功：var tempProps     = this.props;tempProps.legendPosition = 'right';Object.preventExtensions(tempProps);console.log(tempProps);

Answer 1

您无法修改this.props。这里tempProps是参考，this.props因此它不起作用。您应该创建propsusingJSON.parse()和的副本JSON.stringify()

var tempProps = JSON.parse(JSON.stringify(this.props));

tempProps.legendPosition = 'right';

Object.preventExtensions(tempProps);

console.log(tempProps);

Answer 2

我想将更新的道具发送给子组件，如果可以不复制或克隆到新对象，请帮助我如何实现这一目标。

解决方案很简单：

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

当然legendPosition可以在中ChildComponent使用this.props.legendPosition。

当然，早期this.props可含有已经legendPosition属性/值，这将是覆盖被后来的定义-为了事宜。

当然，可以有许多散布运算符-对于多个属性，逻辑块……无论如何：

const additonalProps = {

  legendPosition: 'right',

  sthElse: true

}

return (

  <ChildComponent {...this.props} {...additonalProps} />

)