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

119

Cuál es el significado de

{...this.props}

Estoy tratando de usarlo así

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

reactjs

— Swaraj Ghosh
fuente

201

Se llama atributos de propagación y su objetivo es facilitar el paso de los accesorios.

Imaginemos que tiene un componente que acepta N número de propiedades. Transmitirlos puede ser tedioso y difícil de manejar si el número aumenta.

<Component x={} y={} z={} />

Por lo tanto, en lugar de hacer esto, envuélvalos en un objeto y use la notación de extensión

var props = { x: 1, y: 1, z:1 };
<Component {...props} />

que lo descomprimirá en los accesorios de su componente, es decir, "nunca" lo usará {... props}dentro de su render()función, solo cuando pase los accesorios a otro componente. Use sus accesorios desempaquetados como de costumbre this.props.x.

— Henrik Andersson
fuente

2

Solo para agregar, puede ayudar pensar en él como un reemplazo al this.transferPropsToque quedó obsoleto en React 0.12.xy se eliminará en 0.13.x. Por supuesto, permite un uso mucho más avanzado, sin embargo, simplemente traducir React 0.11.x this.transferPropsTo(<Foo />)a <Foo {...this.props} />es más útil para las personas que realizan esa transición.

— Mike Driver

13

Buen awnser, pero 'nunca' usas {... props} dentro de tu función render (), solo cuando pasas los accesorios a otro componente. ' Es un término muy confuso. La recomendación para reescribir es como "Solo usa {... props} dentro de su render () cuando pasa los accesorios a otro componente". para mayor claridad.

— dprogramz

17

Es ES6 Spread_operatory Destructuring_assignment.

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

Es igual a Class Component

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
);

o Function component

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
);

refs

— xgqfrms
fuente

1

Se compilará a esto:

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

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

— Vad
fuente

1

Es la característica ES-6. Significa que extraes todas las propiedades de los accesorios en div.{... }

El operador se utiliza para extraer propiedades de un objeto.

— Mayank Soni
fuente

1

Usarás accesorios en tu componente hijo.

por ejemplo

si sus accesorios de componentes ahora son

{
   booking: 4,
   isDisable: false
}

Puedes usar estos accesorios en tu composición infantil.

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

en su componente secundario, recibirá todos los accesorios para padres.

— Todd Bauman
fuente

Buena respuesta, pero sería aún mejor si incluyera una explicación sobre para qué sirven los accesorios.

— Mike Poole