¿Qué es incluso 'niños'?

Los documentos de React dicen que puede usar props.children en componentes que representan 'cajas genéricas' y que no conocen a sus hijos antes de tiempo. Para mí, eso realmente no aclaró las cosas. Estoy seguro de que para algunos, esa definición tiene mucho sentido, pero no para mí.

Mi explicación simple de lo que hace this.props.children es que se usa para mostrar lo que incluya entre las etiquetas de apertura y cierre al invocar un componente.

Un ejemplo sencillo:

Este es un ejemplo de una función sin estado que se usa para crear un componente. Nuevamente, dado que esta es una función, no existe this palabra clave, así que solo use props.children

 const Picture = (props) => { return ( <div> <img src={props.src}/> {props.children} </div> ) }

Este componente contiene un <img> que recibe algunos props y luego muestra {props.children} .

Siempre que se invoque este componente, también se mostrará {props.children} y esto es solo una referencia a lo que hay entre las etiquetas de apertura y cierre del componente.

 //App.js render () { return ( <div className='container'> <Picture key={picture.id} src={picture.src}> //what is placed here is passed as props.children </Picture> </div> ) }

En lugar de invocar el componente con una etiqueta de cierre automático <Picture /> , si lo invoca abrirá y cerrará por completo las etiquetas <Picture> </Picture> , puede colocar más código entre ellos.

Esto desacopla el componente <Picture> de su contenido y lo hace más reutilizable.

Referencia:Una introducción rápida a props.children de React

Supongo que está viendo esto en el método de render de un componente React, así (editar: su pregunta editada sí muestra eso) :

 class Example extends React.Component { render() { return <div> <div>Children ({this.props.children.length}):</div> {this.props.children} </div>; } } class Widget extends React.Component { render() { return <div> <div>First <code>Example</code>:</div> <Example> <div>1</div> <div>2</div> <div>3</div> </Example> <div>Second <code>Example</code> with different children:</div> <Example> <div>A</div> <div>B</div> </Example> </div>; } } ReactDOM.render( <Widget/>, document.getElementById("root") );

 <div id="root"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

children es una propiedad especial de los componentes de React que contiene elementos secundarios definidos dentro del componente, por ejemplo, los divs dentro del Example anterior. {this.props.children} incluye esos elementos secundarios en el resultado representado.

...cuáles son las situaciones para usar el mismo

Lo haría cuando desee incluir los elementos secundarios en la salida renderizada directamente, sin cambios; y no si no lo hiciste.

props.children representa el contenido entre las etiquetas de apertura y cierre al invocar/renderizar un componente:

 const Foo = props => ( <div> <p>I'm {Foo.name}</p> <p>abc is: {props.abc}</p> <p>I have {props.children.length} children.</p> <p>They are: {props.children}.</p> <p>{Array.isArray(props.children) ? 'My kids are an array.' : ''}</p> </div> ); const Baz = () => <span>{Baz.name} and</span>; const Bar = () => <span> {Bar.name}</span>;

invocar/llamar/render Foo :

 <Foo abc={123}> <Baz /> <Bar /> </Foo>