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

nestify（）

的实现应该是什么，以使以下组件彼此等效

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

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

const A=nestify（[Foo，Bar，Baz]）；
常数B=props=>(
{props.children}
);

一个想法（假设函数应该处理动态数组）可以是使用

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);