Создание вложенных компонентов, взятых из родительского компонента в качестве реквизита

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

Мне нужно вызвать эти переданные компоненты с помощьюметод (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>
        );
   }

Рабочая демонстрация