Cuando escribes

 const ChildComponent = ({ someProp }) => ( <div> <h1>Child Component {someProp}</h1> </div> )

De todos los accesorios que está pasando al childComponent , solo está desestructurando para obtener solo someProp . Si la cantidad de accesorios que desea usar en ChildComponents son contables (pocos) entre la cantidad total de accesorios disponibles, la desestructuración es una buena opción, ya que proporciona una mejor legibilidad.

Supongamos que desea acceder a todos los accesorios en el componente secundario, entonces no necesita usar {} alrededor del argumento y luego puede usarlo como props.someProp

 const ChildComponent = (props) => ( <div> <h1>Child Component {props.someProp}</h1> </div> )

¿Está buscando la sintaxis de argumento con nombre de ES6 (que simplemente se desestructura)?

 const ChildComponent = ({ propName }) => ( <div> <h1>Child Component</h1> </div> ) const ChildComponent = (props) => ( // without named arguments <div> <h1>Child Component</h1> </div> )

Opcionalmente, hay un segundo argumento para su función dependiendo de si especificó un contexto para su componente o no.

Tal vez sería más útil incluir enlaces a los documentos . Como decíamos en el primer artículo sobre componentes funcionales . Cualquier accesorio que se pase al componente se representa como un objeto que se pasa como primer argumento a su componente funcional.

Para ir un poco más allá, sobre la notación de propagación dentro de jsx.

Cuando escribes en un componente:

 <Child prop1={value1} prop2={value2} />

Lo que recibirá su componente es un objeto simple que se ve así:

 { prop1: value1, prop2: value2 }

(Tenga en cuenta que no es un mapa, sino un objeto con solo cadenas como claves).

Entonces, cuando usa la sintaxis extendida con un objeto JS, es efectivamente un acceso directo a esto

 const object = { key1: value1, key2: value2 } <Component {...object}/>

Es equivalente a

 <Component key1={value1} key2={value2} />

Y en realidad compila a

 return React.createElement(Component, object); // second arg is props

Y, por supuesto, puede tener la segunda sintaxis, pero tenga cuidado con el orden. La sintaxis más específica (prop=valor) debe ser la última: la instrucción más específica es la última.

Si lo haces :

 <Component key={value} {...props} />

Se compila a

 React.createElement(Component, _extends({ key: value }, props));

Si lo haces (lo que probablemente deberías)

 <Component {...props} key={value} />

Se compila a

 React.createElement(Component, _extends(props, { key: value }));

Donde se extiende es *Object.assign (o un polyfill si no está presente).

Para ir más allá, realmente recomendaría tomarse un tiempo para observar el resultado de Babel con su editor en línea . Esto es muy interesante para comprender cómo funciona jsx y, en general, cómo puede implementar la sintaxis es6 con las herramientas ES5.

Puede usar Atributos extendidos para reducir la sobrecarga de código. Esto viene en forma de {'somearg':123, ...props} o {...this.props} , y el primero le permite configurar algunos campos, mientras que el segundo es una copia completa. Aquí hay un ejemplo con ParentClass.js :

 import React from 'react'; import SomeComponent from '../components/SomeComponent.js'; export default class ParentClass extends React.Component { render() { <SomeComponent {...this.props} /> } }

Si lo hago, <ParentClass getCallBackFunc={() => this.getCallBackFunc()} /> , o si lo hago <ParentClass date={todaysdatevar} /> , los accesorios getCallBackFunc o date estarán disponibles para la clase SomeComponent . Esto me ahorra una cantidad increíble de escribir y/o copiar/pegar.

Fuente: ReactJS.org: JSX en profundidad, Especificación del tipo de elemento React, Atributos extendidos . POD oficial:

Si ya tiene props como objeto y desea pasarlo en JSX, puede usar ... como un operador de "spread" para pasar todo el objeto props. Estos dos componentes son equivalentes:

 return <Greeting firstName="Ben" lastName="Hector" />; } function App2() { const props = {firstName: 'Ben', lastName: 'Hector'}; return <Greeting {...props} />; }```

¡Ahora, apliquemos esto a su ejemplo de código!

 const ParentComponent = (props) => ( <div> <h1>Parent Component</h1> <ChildComponent {...props} /> </div> );