La diferencia entre accesorios y reacciones. los niños están reaccionando
Función ParentComponent(props){
return (
ltdiv gt
{props.child}
lt/div gt;
)
}
¿Qué debo hacer si quiero pasar propiedades del componente principal a todos los componentes secundarios? ? - Esto se puede hacer utilizando los métodos auxiliares de React.Children.
Por ejemplo, combinar varias radios en un RadioGroup requiere que todas las radios tengan el mismo valor de atributo de nombre. Se puede diseñar de esta manera: Radio se usa como componente secundario, RadioGroup se usa como componente principal y el valor del atributo de nombre se establece en el componente principal de RadioGroup.
El primero es el subcomponente:
//Subcomponente
Botón de opción de función (prop) {
Regresar (
lt labelgt
ltinput type = " radio " valor = { props valor } nombre = { props nombre }/ gt;
{props.label }
lt/label gt;
)
}
Entonces el componente principal no solo necesita mostrar todos sus componentes secundarios, también necesita para asignar el atributo de nombre y el valor a cada componente secundario: // Para el componente principal, ¿los accesorios se refieren a los accesorios del componente principal? Función Render Children(props){// Recorre todos los componentes secundarios y devuelve reaccionar Children .
return React.cloneElement(child, {
//Asigna el props.name del componente principal a cada componente secundario.
Nombre: props.name
})
Otros
Devolver hijos
})
}
//Componente principal
Grupo de botones de opción de función (props){
Retorno (
ltdiv gt
{renderChildren(props)}
lt/div gt;
)
}
Función Aplicación() {
Retorno (
ltRadioGroup name="hola " >>p>
ltradio Opción etiqueta = " Opción 1 " valor = " 1 "/>
ltradio Opción etiqueta = " Opción 2 " valor = " 2 "/>
ltradio opción etiqueta = " opción 3 " valor = " 3 "/>
lt/radio grupo gt；
)
}
Exportar aplicaciones predeterminadas
Lo más importante es reaccionar. Children.map nos permite controlar de manera más flexible todos los componentes secundarios del componente principal.