I have a components array.
const components = [
A,
B,
C,
]
Then I want to render this components like this:
return (
<A>
<B>
<C>
</C>
</B>
</A>
)
But I can add a new component or switch the order of the components. I want to render this component tree in the same order as the components array.
So how can I dynamically create a component tree based on the components array?
at least one
Write a recursive function, nest. At least one component is required -
const nest = ([T, ...more]) =>
more.length == 0
? <T />
: <T>{nest(more)}</T>
Use it in your components like this -
function MyComp(props) {
return nest([A, B, C])
}
possibly zero
If you want the possibility to support an empty array, this is safest -
const nest = ([T, ...more]) =>
T == null
? null
: <T>{nest(more)}</T>
nest([]) // => null
nest([A,B,C]) // => <A><B><C/></B></A>
with props
If you want to supply props to the components, you can use a similar technique -
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>
alternative
If props are needed, a better solution might be to colocate the props with the components using continuations -
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>