如何从可渲染组件数组中构建JSX组件树？

Question

想象一下，我们有以下简单的反应组件：

const A = function() { return "I'm an instance of A!" }
const B = function() { return "I'm an instance of B!" }
const C = function() { return "I'm an instance of C!" }

假设类型形成一个数组，如下：

const toRender = [A, B, C]

...如何将每种类型呈现为嵌套层次结构，以便每个后续索引表示一个新子项？即B是A的孩子，C是B的孩子？

相当于此的东西：

function render()
{
  return <A><B><C/></B></A>
}

Answer 1

如果您想继续使用JSX，以下方法将起作用：

let A = "div"
let B = "span";
let C = "p";
let arr = [A,B,C];

let  nestChild = (e) => {
  if (e.length === 0) return
  let Comp = e.shift();
  return <Comp>{nestChild(e)}</Comp>;
}  

return (
    {nestChild(arr)}
)

如果您想使用实例而不是字符串，那么您可以使用：

let A = (props) => <div {...props}/>
let B = (props) => <span {...props}/>
let C = (props) => <p {...props}/>

Answer 2

用本机React.createElement()替换JSX，可以按如下方式完成：

// @ some render function

const toRender = [A,B,C]; // array with dynamic length
const props = { a: 'random prop' }; // optional props to pass to each element

const lastIndex = toRender.length - 1;
let childElement = React.createElement(toRender[lastIndex], props);

for (var i = lastIndex-1; i >= 0; i--)
{
  childElement = React.createElement(toRender[i], props, childElement);
}

return childElement;