Question

在构造函数中访问props的正确方法是什么？是的，我知道在React文档中这样说

在实现React.Component子类的构造函数时，应该在其他任何语句之前调用super（props）。除此以外， this.props将在构造函数中未定义，这可能会导致错误

更清楚地说，如果我们仅能在构造函数中使用道具，为什么需要this.props

class MyComponent extends React.Component {    
    constructor(props) {
        super(props)

        console.log(props)
        // -> { something: 'something', … }
        // absolutely same
        console.log(this.props)
        // -> { something: 'something', … }
    }
}

在某些情况下何时在props上使用this.props吗？

Answer 1

this.props和props在构造函数中是可互换的，因为this.props === props，只要将props传递给super 。使用this.props可以立即发现错误：

constructor() {
  super();
  this.state = { foo: this.props.foo }; // this.props is undefined
}

持续使用this.props可以更轻松地重构构造函数主体：

constructor(props) {
  super(props);
  this.state = { foo: this.props.foo };
}

到

state = { foo: this.props.foo };

仅需删除this.。

还有typing problems with props in TypeScript，这使this.props更适合键入组件。

Answer 2

存在此建议的目的是防止您通过依赖于this.props的构造函数在对象上调用其他方法来引入错误。您不想显式传递道具。

例如以下内容可能是一个错误，因为您在doStuff之前叫super

class MyComponent extends React.Component {    
    constructor(props) {
        this.doStuff()
        super(props)
    }

    doStuff() {
      console.log("something is: " + this.props.something)
    }
}

Answer 3

正确的方法是-不要在构造函数中使用道具-只需发送给父母即可。

但是两种方法都可以。

因此，在构造函数中读取道具有一种特殊情况，它是从道具设置为默认状态的。

在调用super(props)之后的构造函数中，this.props和props 等于。 this.props = props。

这仅取决于您的喜好，我更喜欢始终致电this.props。

示例：

   constructor(props) {
        super(props)
        this.state = {
           isRed: this.props.color === 'red',
        }
   }

请确保您正在构造函数的第一行调用super(props)。

在构造函数中访问道具的正确方法是什么？

3 个答案: