Question

他们说你不应该修改React组件中的props。这是否扩展到在构造函数中修改它们？

具体地，

export default class BookingForm extends React.Component {

    constructor(props) {
        // am I allowed to modify `props` here?
        super(props);
    }
}

非常清楚，我知道JavaScript会允许我这样做，我问这是一个糟糕的设计模式，将来会让我头疼。

我想在初始化时重新格式化一些道具;在那之后他们不会再改变。

Answer 1

要重新调整zerkms向我指出的内容，答案是否，您允许修改props，甚至在构造函数中。

super()期望与你给出的完全相同的道具，即使你试图通过提供不同的东西来欺骗系统，它们也会被覆盖紧接着构造函数之后。因此，您无法修改this.props。

即使您尝试修改props对象以添加额外属性，您也会看到如下错误：

TypeError：无法添加属性培根，对象不可扩展

所以即使你想要，你也无法修改构造函数中的props。

但是，您可以设置新的[JavaScript]属性，例如

this.myReformattedProperty = format(props.oldProperty)

Answer 2

您不能修改props，即使在构造函数中也不能修改道具。示例：

constructor(props) {
  // This won't work. You will get "TypeError: Cannot add property aNewProp, object is not extensible" error.
  // props.aNewProp = 'someValue';
  // This won't work either. You will get "TypeError: Cannot assign to read only property 'anExistingProp' of object '#<Object>'" error.
  // props.anExistingProp = 'someValue';
  // However, this will work perfectly:
  props.anExistingProp.anExistingOrNewPropertyInThatProp = 'someValue';
  super(props);
}

render() {
  console.log('this.props are:');
  console.log(this.props);
  // The print-out includes the modifications that has been made to an existing prop.
}

我允许'修改构造函数中的道具吗？

2 个答案: