reactjs - props react español
¿Cuál es el significado de{... this.props} en Reactjs (5)
Cuál es el significado de
{...this.props}
Estoy tratando de usarlo así
<div {...this.props}> Content Here </div>
Es ES6
Spread_operator
y
Destructuring_assignment
.
<div {...this.props}>
Content Here
</div>
Es igual al componente de clase:
const person = {
name: "xgqfrms",
age: 23,
country: "China"
};
class TestDemo extends React.Component {
render() {
const {name, age, country} = {...this.props};
// const {name, age, country} = this.props;
return (
<div>
<h3> Person Information: </h3>
<ul>
<li>name={name}</li>
<li>age={age}</li>
<li>country={country}</li>
</ul>
</div>
);
}
}
ReactDOM.render(
<TestDemo {...person}/>
, mountNode
);
Componente de la función
const props = {
name: "xgqfrms",
age: 23,
country: "China"
};
const Test = (props) => {
return(
<div
name={props.name}
age={props.age}
country={props.country}>
Content Here
<ul>
<li>name={props.name}</li>
<li>age={props.age}</li>
<li>country={props.country}</li>
</ul>
</div>
);
};
ReactDOM.render(
<div>
<Test {...props}/>
<hr/>
<Test
name={props.name}
age={props.age}
country={props.country}
/>
</div>
, mountNode
);
Para más detalles, ver los siguientes enlaces:
Es la función ES-6.
Significa que extrae todas las propiedades de los accesorios en
div.{... }
El operador se utiliza para extraer propiedades de un objeto.
Se compilará para esto:
React.createElement(''div'', this.props, ''Content Here'');
Como puede ver arriba, pasa todos sus accesorios al
div
.
Se llama propagación de atributos y su objetivo es facilitar el paso de los accesorios.
Imaginemos que tiene un componente que acepta N número de propiedades. Pasarlos puede ser tedioso y difícil de manejar si el número crece.
<Component x={} y={} z={} />
Por lo tanto, en lugar de hacer esto, envuélvalos en un objeto y use la notación de propagación
var props = { x: 1, y: 1, z:1 };
<Component {...props} />
que lo descomprimirá en los accesorios de su componente, es decir, "nunca" usará
{... props}
dentro de su función
render()
, solo cuando pase los accesorios a otro componente.
Use sus accesorios desempaquetados de manera normal
this.props.x
.
Usarás accesorios en el componente de tu hijo
por ejemplo
si sus accesorios de componentes ahora es
{
booking: 4,
isDisable: false
}
puede usar estos accesorios en el componente de su hijo
<div {...this.props}> ... </div>
en su componente hijo, recibirá todos los accesorios de sus padres.