learn - ReactJS: ¿Por qué usar this.props.children?
react js vs angular (3)
Me he dado cuenta de que ninguno de los componentes que escribo usa {this.props.children} .
Tiendo a componer mis componentes de la forma en que se indican los documentos oficiales en la parte superior de https://facebook.github.io/react/docs/multiple-components.html .
Está anidando los componentes como este ...
<A>
<B />
<C />
</A>
... beneficioso sobre componerlos así ?:
A.js
render() {
<B />
<C />
}
Suponiendo que esa es la terminología correcta, ¿qué me estoy perdiendo?
Algunos componentes no conocen a sus hijos antes de tiempo. Esto es especialmente común para componentes como la barra lateral o el diálogo que representan "cajas" genéricas.
Recomendamos que dichos componentes utilicen el accesorio especial para niños para pasar elementos infantiles directamente a su salida: Leer más ...
En mis aplicaciones, rara vez utilizo this.props.children, porque a menudo sé específicamente qué niños quiero renderizar. En bibliotecas, o componentes escritos para ser reutilizados fuera de una jerarquía de componentes específica, lo he visto a menudo. Creo que this.props.children tiene más relevancia para ese caso de uso.
Edit: pensé que me gustaría elaborar en algunos casos que esto.props.children puede ser útil. Uno de estos ejemplos es cuando se crean componentes que siguen el patrón de '' prop prop ''. es decir, tengo algunos componentes que requieren extraer datos de varios HoC ''prop de procesamiento'', como un componente de Apollo Query y un HoC de administración de estado. Combiné todas mis diferentes fuentes de datos en un HoC y luego llamé a los niños como una función, pasando el resultado de sacar todos los datos que necesitaba. Dicho esto, en estos días prefiero y espero una adopción más amplia de Hooks como una alternativa para brindar utilería.
En realidad, cualquier componente que desea que los hijos arbitrarios; otro ejemplo que he usado props.children es al crear un HoC que requería la autenticación de un usuario antes de renderizar al niño, redirigiéndolo a una pantalla de inicio de sesión cuando el usuario no ha iniciado sesión. Podría ajustar cualquiera de mis componentes de pantalla ''protegidos'' con este auth HoC.
Todavía es algo que la mayoría de mis componentes no usa, pero solo otra herramienta que se aplica cuando la situación lo amerita.
Yo diría que sería útil cuando no sabes lo que quieres renderizar.
Por ejemplo, tiene un contenedor de información sobre herramientas, digamos que es A componente A en su escenario, y puede usarlo para pasar contenido diferente:
<A>
<div>Some text...</div>
<ImageComponent /> // render an image as well
</A>
O:
<A>
<div>Only text</div>
</A>