Reactjs 创建从父组件作为道具的嵌套组件

我有一个理论问题。我有两个组件：父组件和子组件。在父组件中，我正在创建一些组件（第一、第二、第三……），并将它们作为数组（arr）传递给子组件

Parent
常数优先=（）=>{
返回第一；
};
常数秒=（）=>{
返回第二；
};
常数三=（）=>{
返回第三；
};
常量arr=[第一、第二、第三]；
render（）{
返回(
);
}

我需要通过子组件中的方法（nest（））调用传递给它们的组件，一个嵌套在另一个组件中，如下所示：

<First>
  <Second>
    <Third />
  </ Second>
</ First>

我可以映射它们并得到一个列表，但不知道如何使它们嵌套

正如我前面提到的，我成功地将它们呈现如下：

Child
    constructor(props) {
        super(props);
        this.nest = this.nest.bind(this);
      }
      nest() {
        return this.props.arr.map(element => <div key={element}>{element()}</div>);
      }
      render() {
        return (
          <div>
            {this.nest()}
          </div>
        );
      }

Child
建造师（道具）{
超级（道具）；
this.nest=this.nest.bind（this）；
}
nest（）{
返回这个.props.arr.map（元素=>{element（）}）；
}
render（）{
返回(
{this.nest（）}
);
}

---

请让我调用嵌套的方法。

您需要递归地调用所有嵌套方法，而不是映射到元素上。您还需要将

子元素添加到
第一个
，
第二个
组件中

nest(arr) {
        if (arr.length > 0) {
            return React.createElement(arr[0], {}, this.nest(arr.slice(1)))
        }
        return null;
   }

   render() {
        return (
          <div>
            {this.nest(this.props.arr)}
          </div>
        );
   }

nest（arr）{
如果（arr.length>0）{
返回React.createElement（arr[0]，{}，this.nest（arr.slice（1）））
}
返回null；
}
render（）{
返回(
{this.nest（this.props.arr）}
);
}

像这样的数组的迭代在
reduce
或在本例中，
reduceRight
时效果最好：

nest() {
  return this.props.arr.reduceRight(
    (children, NestedComponent) => <NestedComponent>{children}</NestedComponent>,
    null
  );
}

作品谢谢！
nest() {
  return this.props.arr.reduceRight(
    (children, NestedComponent) => <NestedComponent>{children}</NestedComponent>,
    null
  );
}

const First = ({ children }) => {
  return <div>1st {children}</div>;
};