Estoy trabajando con una estructura simple de elementos de reacción:
... <ComponentWrapper> <FirstComponent /> <SecondComponent /> <ThirdComponent /> </ComponentWrapper> ... Y en mi ComponentWrapper quiero trabajar con todos los niños, pero en mi FirstComponent tengo esta estructura:
const FirstComponent = () => { return <> <Subcomponent /> <Subcomponent /> <Subcomponent /> </> Entonces, en esta estructura en ComponentWrapper , solo tengo 3 niños, pero en realidad tengo que obtener 5. 3 niños de FirstComponent y 2 niños del segundo y tercer componente.
¿Puede alguien tener una idea de cómo omitir React.Fragment y obtener 3 hijos del primer componente?
Puede agregar cualquier componente que desee representar dentro de Firstcomponent a una matriz. y luego devolver esa matriz, así
export default function FirstComponent () { const x = []; x.push(<p>Hello</p>); x.push(<p>Hello</p>); x.push(<Subcomponent/>); x.push(<Subcomponent/>); return x; }o en lugar de empujarlos en una matriz y luego devolver la matriz, simplemente devuélvalo directamente así
return [ <p>Hello</p>, <p>Hello</p>, <Subcomponent/>, <Subcomponent/> ]Es posible que también deba darle a cada elemento un apoyo clave. También tenga en cuenta que siempre es mejor usar el fragmento de reacción. Los documentos de reacción tienen una sección que menciona esto: enlace