Red de conocimiento informático - Problemas con los teléfonos móviles - ¿Cuál es la diferencia entre props.children y React.Children en React?

¿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