Por que eu devo usar props
dentro do constructor
e do props
?
constructor(props){super(props)}
- Por que usar
props
noconstructor
? - Por que usar
props
nosuper
? - Por que usar
super
?
No React, quando se cria um componente statefull, deve se estender uma Classe Javascript Nativa, com o React.Component
ficando:
class Container extends React.Component {
render() {
return (
<div>
</div>
);
};
}
Sendo assim a propriedade props
pertence ao React.Component
, e para acessar o conteúdo do React.Component
na montagem da classe Container
, deve se usar o super
para injetar as propriedades (props, métodos) assim que o constructor for chamado.
Ficando deste modo:
class Container extends React.Component {
constructor(props) {
super(props)
this.state = {
list: props.list
}
}
render() {
return (
<div>
</div>
);
};
}
Por isso a definição do MDN diz que:
A palavra-chave super
é usada para acessar o objeto pai de um objeto, em outros casos, é usada para acessar a classe pai de uma classe.
https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Operators/super
A palavra-chave super
é usada para acessar o objeto pai de um objeto, em outros casos, é usada para acessar a classe pai de uma classe.
Quando usada no construtor de uma classe, super
deve ser usado apenas uma vez, e antes que a palavra-chave this
possa ser usada.
Só faz sentido utilizá-la no construtor se você quer inicializar o state baseado nas props. Ou se você quiser usar algum método passado via props
.
Exemplo:
class Pai extends React.Component {
render() {
return (
<div>
<Filho num={0} />
<Filho num={10} />
<Filho num={20} />
</div>
);
};
}
class Filho extends React.Component {
constructor(props) {
super();
this.state = {
num: props.num,
};
};
handleClick = () => {
const {num} = this.state;
this.setState({ num: num + 1});
};
render() {
const { num } = this.state;
return (
<div>
num = {num}
<button
onClick={this.handleClick}
>
+
</button>
</div>
);
};
}
Você pode usar super()
ou super(props)
. A única diferença é que usar super(props)
fará com que this.props
seja idêntico a props
.
new MyElement({propName: 'propValue'})
. O super serve para chamar o construtor da classe estendida, se faz isso porque o React realiza mais algumas coisas com essas propriedades