如何在 React 中基于包含组件的数组动态创建组件树？

Question

我有一个组件数组。

const components = [
  A,
  B,
  C,
]

然后我想像这样渲染这些组件：

return (
  <A>
    <B>
      <C>
      </C>
    </B>
  </A>
)

但我可以添加一个新组件或切换组件的顺序。 我想以与组件数组相同的顺序呈现此组件树。

那么如何根据 components 数组动态创建组件树呢？

Answer 1

最后一个

编写一个递归函数， nest 。 至少需要一个组件 -

const nest = ([T, ...more]) =>
  more.length == 0
    ? <T />
    : <T>{nest(more)}</T>

像这样在您的组件中使用它 -

function MyComp(props) {
  return nest([A, B, C])
}

可能为零

如果您希望支持空数组，这是最安全的 -

const nest = ([T, ...more]) =>
  T == null
    ? null
    : <T>{nest(more)}</T>

nest([]) // => null
nest([A,B,C]) // => <A><B><C/></B></A>

带道具

如果您想为组件提供道具，您可以使用类似的技术 -

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>

选择

如果需要道具，更好的解决方案可能是使用延续将道具与组件放在一起 -

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>