Estoy tomando un curso para principiantes en reaccionar js. Encontré componentes de clase y quería saber cómo se inicializa el objeto props .
por ejemplo:
Componente principal:
class App extends React.Component { render() { return ( <div> <Header username="xyz"/> </div> ) } }Encabezamiento:
class Header extends React.Component { render() { return ( <div> <p>Welcome, {this.props.username}</p> </div> ) } } Quería saber si el objeto props en la clase Header se está inicializando.
¿No debería ser algo como esto:
class Header extends React.Component { constructor(props) { super() this.props = props } render() { return ( <div> <p>Welcome, {this.props.username}</p> </div> ) } }Al usar el código anterior, recibo un mensaje:
ReferenceError: debe llamar al superconstructor en la clase derivada antes de acceder a 'esto' o regresar del constructor derivado
Mi pregunta es, si queremos pasar algo a una clase, ¿no debería hacerse usando un constructor?
Al extender React.Component, React hace esto por usted.
El objeto props nunca debe cambiarse dentro del componente receptor. Los componentes de la clase React reunirán todos los argumentos que pases a un componente y se referirán a ellos con el nombre común "props". Es por eso que no tiene que hacerlo usted mismo, en el constructor.
Sin embargo, en React moderno, los componentes de clase rara vez se usan. La razón es que los componentes de clase acaban fácilmente con una gestión del ciclo de vida complicada.
El componente de encabezado, escrito como una función en lugar de una clase, se vería así:
const Header = (props) => ( <div> <p>Welcome, {props.username}</p> </div> )También es muy común desestructurar accesorios directamente, de modo que nunca acceda realmente al objeto de accesorios, así:
const Header = ({username}) => ( <div> <p>Welcome, {username}</p> </div> )En el caso de los componentes de función, puede usar el nombre que desee para los accesorios. Sin embargo, yo no lo haría, porque la gente está acostumbrada a que los accesorios se llamen accesorios. Pero esto también funcionaría:
const Header = (params) => ( <div> <p>Welcome, {params.username}</p> </div> )Usé el mismo código que publicaste sin constructor y no tengo ningún error.
Puede pasar lo que quiera a una clase sin usar un constructor como lo hizo en su código de ejemplo.
Les comparto el link de su código en sandbox. Puse el constructor en Header para mostrar que devuelve lo mismo con él y sin él.