¿Qué hacen estos tres puntos en React?

¿Qué hace ...en este código de React (usando JSX) y cómo se llama?

<Modal {...this.props} title='Modal heading' animation={false}>

Jun 25 '15 18:06 Thomas Johansen

Esa es la notación de distribución de propiedad . Se agregó en ES2018 (la distribución para matrices/iterables era anterior, ES2015), pero ha sido compatible con proyectos de React durante mucho tiempo mediante transpilación (como " atributos de extensión JSX " aunque también podría hacerlo en otros lugares, no solo atributos ).

{...this.props} distribuye las propiedades enumerables "propias" propscomo propiedades discretas en el Modalelemento que está creando. Por ejemplo, si this.propsestá contenido a: 1y b: 2, entonces

<Modal {...this.props} title='Modal heading' animation={false}>

seria lo mismo que

<Modal a={this.props.a} b={this.props.b} title='Modal heading' animation={false}>

Pero es dinámico, por lo que se incluyen todas las propiedades "propias" props.

Dado que childrenes una propiedad "propia" props, la extensión la incluirá. Entonces, si el componente donde aparece esto tenía elementos secundarios, se pasarán a Modal. Poner elementos secundarios entre la etiqueta de apertura y las etiquetas de cierre es simplemente azúcar sintáctico (del tipo bueno) para poner una childrenpropiedad en la etiqueta de apertura. Ejemplo:

Mostrar fragmento de código

class Example extends React.Component {
  render() {
    const { className, children } = this.props;
    return (
      <div className={className}>
      {children}
      </div>
    );
  }
}
ReactDOM.render(
  [
    <Example className="first">
      <span>Child in first</span>
    </Example>,
    <Example className="second" children={<span>Child in second</span>} />
  ],
  document.getElementById("root")
);

.first {
  color: green;
}
.second {
  color: blue;
}

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Expand snippet

La notación extendida es útil no solo para ese caso de uso, sino también para crear un nuevo objeto con la mayoría (o todas) de las propiedades de un objeto existente, lo cual surge con frecuencia cuando se actualiza el estado, ya que no se puede modificar el estado. directamente:

this.setState(prevState => {
    return {foo: {...prevState.foo, a: "updated"}};
});

Eso se reemplaza this.state.foocon un nuevo objeto con todas las mismas propiedades que fooexcepto la apropiedad, que se convierte en "updated":

Mostrar fragmento de código

const obj = {
  foo: {
    a: 1,
    b: 2,
    c: 3
  }
};
console.log("original", obj.foo);
// Creates a NEW object and assigns it to `obj.foo`
obj.foo = {...obj.foo, a: "updated"};
console.log("updated", obj.foo);

.as-console-wrapper {
  max-height: 100% !important;
}

Expand snippet

Jun 25 '2015 11:06 T.J. Crowder

...Se denominan atributos de extensión que, como su nombre lo indica, permiten expandir una expresión.

var parts = ['two', 'three'];
var numbers = ['one', ...parts, 'four', 'five']; // ["one", "two", "three", "four", "five"]

Y en este caso (lo voy a simplificar).

// Just assume we have an object like this:
var person= {
    name: 'Alex',
    age: 35 
}

Este:

<Modal {...person} title='Modal heading' animation={false} />

es igual a

<Modal name={person.name} age={person.age} title='Modal heading' animation={false} />

En resumen, podemos decir que es un buen atajo .

Jan 13 '2017 17:01 Mehdi Raash