Question

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

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

请帮助我嵌套调用它们。

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

Answer 2

您需要递归地使用所有nest方法，而不是在元素上进行映射。另外，您需要向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>
        );
   }

described here

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

2 个答案: