react props español reactjs

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.