Как правильно получить доступ к реквизиту в конструкторе?

Question

Как правильно обращаться к реквизитам в конструкторе?Да, я знаю, что в документации React сказано, что

При реализации конструктора для подкласса React.Component, вы должны вызывать super (props) перед любым другим оператором.В противном случае this.props будет неопределенным в конструкторе, что может привести к ошибкам

Чтобы быть более понятным, зачем нам нужно this.props, если мы можем просто использовать 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.Вы не хотите передавать реквизиты явно.

Например, следующее будет ошибкой, потому что вы вызываете doStuff до super

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

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

Answer 2

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. необходимо удалить.

Есть также проблемы ввода с props в TypeScript , это делает this.props предпочтительным для типизированного компонента.

Answer 3

Правильный путь - не использовать реквизиты в своем конструкторе - просто отправить в родительский.

Но оба способа работают.

Итак, естьэто один особый случай для чтения реквизитов в конструкторе, и он задает состояние по умолчанию из реквизитов.

В конструкторе после вызова super(props) this.props и реквизиты равны .this.props = props.

Это только о том, что вы предпочитаете, я предпочитаю всегда звонить this.props.

Пример:

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

Убедитесь, что вы звоните super(props) в первой строке вашего конструктора.