Digamos que tengo este componente:
const Test = ({ children, ...rest }) => { return <>{children}</> }; export default Test;Me pregunto si es posible crear una variable que contenga el componente de esta manera:
const test = <Test></Test>; Y luego recorra algunos datos y empuje a los niños a la variable de test en cada iteración.
si aún no tiene los datos, entonces todo lo que tiene que hacer es renderizar condicionalmente su componente cuando tenga los datos.
{ data ? (<Test>{data.map(...)}</Test>) : <SomeOtherComponent /> /* or null */}o
{ data ? <>{data.map((x) => <Test>{x}</Test>)}</> : <SomeOtherComponent /> /* or null */}dependiendo de lo que quieras lograr, no entendí completamente tu pregunta
es decir, si tiene los datos que necesita, renderice el componente, renderice los niños como mejor le parezca, de lo contrario renderice algún otro componente (o nulo, para renderizar nada)
Sí, prueba ese patrón:
const test = (children) => <Test>{children}</Test>;y uso
<> {[1,2,3].map(el=>test(el))} </>[Editado]
const TestComp = ({children}) => <Test>{children}</Test>; <> {[1,2,3].map(el=>(<TestComp>{el}</TestComp>))} </>