В чем причина передачи реквизита в super () в конструкторе React, если в нем нет доступа к реквизитам?
Я видел много фрагментов кода, таких как HelloWorld, где props передается в super().
Зачем это нужно, когда в конструкторе this.propsне доступен?
class HelloWorld extends Component {
constructor(props) {
super(props);
this.state = { message: 'Hi' };
this.logMessage = this.logMessage.bind(this);
}
logMessage() {
console.info(this.state.message);
}
render() {
return (
<input type = "button" value = "Log" onClick = {this.logMessage} />
);
}
}
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
конструктор для компонента React вызывается перед его монтированием. При реализации конструктора для подкласса компонентов React вы должны вызывать super(props) перед любым другим оператором.
В противном случае this.props будет неопределенным в конструкторе, что может привести к ошибкам..
Прочтите Здесь для более подробной информации.
Вам не нужно делать super(props). Это делается только для доступа к props внутри конструктора. Ты можешь написать:
constructor(){
super()
this.state = {}
}
Если вы не пройдете super(props):
constructor(props){
super()
console.info('this.props', this.props); // => undefined
console.info('props', props); // => whatever the props is
}
Обратитесь к этот ответ stackoverflow
Если вы не собираетесь использовать this.props в своем конструкторе, вам не нужно помещать его в super() следующим образом:
constructor(){
super();
this.state = { randomState: "" };
this.randomProperty = null;
}
Но в некоторых случаях к props, переданному от родительского компонента, можно получить доступ и использовать внутри конструктора для инициализации состояния (эти свойства не зависят от изменения свойства). Передав props в super, теперь вы можете использовать this.props внутри конструктора.
constructor(props){
super(props);
this.state = { randomVar: props.initialValue, propDependentState: this.props.someValue };
this.someVar = props.defaultValue;
this.anotherVar = this.props.openToChangesProp;
}
Обратите внимание, что те props, которые напрямую передаются этому компоненту, являются единственными реквизитами, доступными конструктору. props, которые отображаются из состояния с помощью redux connect, включен в реквизиты, к которым здесь нельзя получить доступ, поскольку компонент еще не смонтирован.
На самом деле нет никаких причин. Если вы не используете
this.propsв конструкторе, все, что вам нужно сделать, это вызватьsuper(). СуперклассComponentпрекрасно настроит реквизиты, они просто не будут доступны внутри конструктора.