Tengo una matriz de componentes.
const components = [ A, B, C, ]Entonces quiero renderizar estos componentes así:
return ( <A> <B> <C> </C> </B> </A> )Pero puedo agregar un nuevo componente o cambiar el orden de los componentes. Quiero representar este árbol de componentes en el mismo orden que la matriz de componentes.
Entonces, ¿cómo puedo crear dinámicamente un árbol de componentes basado en la matriz de componentes?
al menos uno
Escribe una función recursiva, nest . Se requiere al menos un componente:
const nest = ([T, ...more]) => more.length == 0 ? <T /> : <T>{nest(more)}</T>Úselo en sus componentes como este:
function MyComp(props) { return nest([A, B, C]) }posiblemente cero
Si desea la posibilidad de admitir una matriz vacía, esto es lo más seguro:
const nest = ([T, ...more]) => T == null ? null : <T>{nest(more)}</T> nest([]) // => null nest([A,B,C]) // => <A><B><C/></B></A>con accesorios
Si desea proporcionar accesorios a los componentes, puede utilizar una técnica similar:
const nest = ([T, ...more], [p, ...props]) => T == null || p == null ? null : <T {...p}>{nest(more, props)}</T> nest([A,B,C], [{active: true}, {onClick: console.log}, {}]) <A active={true}> <B onClick={console.log}> <C /> </B> </A>alternativa
Si se necesitan accesorios, una mejor solución podría ser colocar los accesorios con los componentes usando continuaciones:
const nest = ([T, ...more]) => T == null ? null : T(nest(more)) nest([ _ => <A active={true}>_</A>, _ => <B onClick={console.log}>_</B>, _ => <C/> ]) <A active={true}> <B onClick={console.log}> <C /> </B> </A>