我正在我的组件中接收props。我想在这个组件中添加一个带有props的属性“LegendPosition”。我无法做到这一点。请帮我解决一下这个。我已经尝试过这段代码，但没有成功：
var tempProps = this.props;
tempProps.legendPosition = 'right';
Object.preventExtensions(tempProps);
console.log(tempProps);
react：无法添加属性“X”，对象不可扩展
IT技术
javascript
reactjs
object
2021-05-05 03:25:01
4个回答
你不能修改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);
有关深度克隆对象的更好更有效的方法，请参阅在 JavaScript 中深度克隆对象的最有效方法是什么？
props 不是可变的，你不能向它们“添加”任何东西。如果你想“复制”它们，那么你需要做
const tempProps = {...this.props};
我认为您需要添加更多props的唯一原因是将其传递给孩子，但您可以在不将其添加到props对象的情况下做到这一点。
编辑：添加带有额外props的props
<Component {...this.props} legendPosition="right" />
我想将更新的props发送到子组件，如果可以不复制或克隆到新对象，请帮助我如何实现这一点。
解决方案很简单：
<ChildComponent {...this.props} legendPosition="right" />
当然，legendPosition将在获得ChildComponent通过this.props.legendPosition。
当然，更早的this.props可以包含已经定义的legendPosition属性/值，这些属性/值将被稍后定义的顺序问题覆盖。
当然，可以有许多展开运算符 - 对于多个属性、逻辑块……无论：
const additonalProps = {
legendPosition: 'right',
sthElse: true
}
return (
<ChildComponent {...this.props} {...additonalProps} />
)
下面在tempProps对象spread运算符中复制您的this.props对象，在spread运算符之后，我们可以添加新的对象属性，或者我们可以更新现有的对象属性。
var tempProps = {
...this.props,
tempProps.legendPosition = 'right' //property you want to add in props object
};