reactjs - props react español

¿Cuál es el significado de{... this.props} en Reactjs

Question

Cuál es el significado de

{...this.props}

Estoy tratando de usarlo así

 <div {...this.props}> Content Here </div>

Answer 1

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:

• https://babeljs.io/docs/plugins/transform-object-rest-spread/

• https://github.com/gildata/RAIO/issues/136#issuecomment-327361743

• https://facebook.github.io/react/docs/components-and-props.html

Answer 2

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.

Answer 3

Se compilará para esto:

React.createElement(''div'', this.props, ''Content Here'');

Como puede ver arriba, pasa todos sus accesorios al div .

Answer 4

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 .

Answer 5

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.