时间戳

首页 > 解决方案 > 创建从父组件获取的嵌套组件作为道具

reactjs - 创建从父组件获取的嵌套组件作为道具

问题描述

我有一个理论问题。我有两个 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>
        );
      }

请帮助我调用它们嵌套。

标签： reactjsmethodscomponents

解决方案

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

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

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

他们应该是：

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

推荐阅读