创建从父组件获取的嵌套组件作为道具答案

【问题标题】：Creating nested components taken from parent component as a props创建从父组件获取的嵌套组件作为道具
【发布时间】：2019-05-24 17:16:39
【问题描述】：

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

    Parent
const First = () => {
      return <div>1st</div>;
    };
    const Second = () => {
      return <div>2nd</div>;
    };
    const Third = () => {
      return <div>3rd</div>;
    };
    const arr = [First, Second, Third];
      render() {
        return (
          <div className="Main">
            <Child arr={arr} />
          </div>
        );
    }

我需要通过子组件中的方法 (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>
        );
      }

请帮我调用它们嵌套。

【问题讨论】：

标签： reactjs methods components

【解决方案1】：

像这样的数组迭代最适合reduce，或者在这种情况下，reduceRight：

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

它不适用于提供的组件，因为First 等忽略了children 属性。

他们应该是：

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

【讨论】：

有效！非常感谢！

【解决方案2】：

您需要递归地使用所有嵌套方法，而不是映射元素。您还需要将children 元素添加到First、Second 组件中

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

Working demo

【讨论】：