将元素数组嵌套为彼此的子元素

Question

nestify()的实施应该使以下组件彼此等效？

const A = nestify([Foo, Bar, Baz]);

const B = props => (
  <Foo>
    <Bar>
      <Baz>{props.children}</Baz>
    </Bar>
  </Foo>
);

Answer 1

一个想法（假设函数应该处理动态数组）可以是使用React.createElement()的递归实现。它的第三个参数是元素的子元素，因此您可以传入下一个数组元素。在组件中有这样的东西：

const nestify = (components, children, index = 0) =>
  React.createElement(
    components[index],
    {},
    index === components.length - 1
      ? children
      : nestify(components, children, index + 1)
  );

const A = props => nestify([Foo, Bar, Baz], props.children);