Question

假设我们有以下简单的react组件：

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;

Answer 3

几年后，但这是使用reduce的一种好方法。而且，如果我们不在乎组件的顺序，则可以删除reverse()调用。

toRender.reverse().reduce((ChildrenTree, Current) => (
    <Current>{ChildrenTree}</Current>
), null)

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

3 个答案: