¿Cuál es la diferencia entre props.children y React.Children en React?
En React, cuando se trata de anidar componentes, use props.children en el componente principal para resaltar todos los componentes secundarios. Como se muestra a continuación:
función ParentComponent(props){
return (
lt; divgt;
{props.children}
lt;/divgt;
)
}
Si desea pasar propiedades del componente principal a todos los componentes secundarios, esto ¿Qué hacer? -- Esto se puede lograr usando el método auxiliar React.Children
Por ejemplo, al combinar varias Radios en un RadioGroup, todas las Radios deben tener el mismo valor de atributo de nombre.
Puede diseñarlo de esta manera: trate a Radio como un componente secundario, RadioGroup como un componente principal y establezca el valor del atributo de nombre en el componente principal RadioGroup
Primero está el subcomponente:
// Subcomponente
función RadioOption(props) {
return (
lt; labelgt;
lt; input type="radio " valor= {props.value} nombre={props.name} /gt;
{props.label}
lt;/labelgt;
)
}
Luego está el componente principal, que no solo necesita mostrar todos sus componentes secundarios, sino que también necesita asignar un atributo de nombre y un valor a cada componente secundario: // Para el componente principal, los accesorios son los accesorios del componente principal. ?function renderChildren(props) { // Recorre todos los componentes secundarios return React.Children.map(props.children, child =gt; {
if (child.type === RadioOption)
return React.cloneElement( child, {
// Asigne a cada componente secundario el props.name del componente principal
nombre: props.
} )
else
devolver niño
})
}
función RadioGroup(props) {
} p>
return (
lt;divgt;
{renderChildren(props) }
lt;/divgt;
)
}
}
función Aplicación() {
return (
lt; RadioGroup name= "hola"gt;
lt; RadioOption label="Opción Uno" valor="1" /gt;
lt.
lt; RadioOption etiqueta="Opción 2" valor="2" /gt;
lt; RadioOption etiqueta="Opción 3" valor= "3" /gt;
lt;/RadioGroupgt;
p>)
}
p>xportar aplicación predeterminada
Además de esto, React.Children.map nos brinda control total sobre el componente principal. Control más flexible de los subcomponentes