Question

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

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

console.log(tempProps);

Answer 1

您无法修改this.props。这里的tempProps是this.props的引用，因此它不起作用。您应该使用props和JSON.parse()

创建JSON.stringify()的副本

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

console.log(tempProps);

有关深度克隆对象的更好且有效的方法，请参见What is the most efficient way to deep clone an object in JavaScript?

Answer 2

道具不是可变的，您不能向它们“添加”任何东西。如果您要“复制”它们，则需要执行

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

我看到您需要添加更多道具的唯一原因是将其传递给孩子，但是您可以做到这一点而无需将其添加到props对象中。

编辑：添加带有额外道具的道具

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

Answer 3

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

解决方案很简单：

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

当然legendPosition的{{1}}将在ChildComponent中可用。

当然，较早的this.props.legendPosition可以包含已经this.props的属性/值，稍后将由其定义-订购事项。

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

legendPosition

Answer 4

您的答案就在这一行。

var tempProps = this.props;

this.props是不可变的，这意味着您不能在函数中更改属性值。您可以使用this.state，以便您可以在函数中对其进行修改

道具---您无法更改其值。
状态---您可以在代码中更改其值，但是在渲染时它将处于活动状态发生。

Answer 5

在tempProps对象spread运算符下面，复制您的this.props对象，在spread运算符之后，我们可以添加新的对象属性，也可以更新现有的对象属性。

var tempProps = {
  ...this.props,
  tempProps.legendPosition = 'right' //property you want to add in props object
};

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

5 个答案: