反应不通过工厂功能渲染多个组件

Question

问题如下，我有一个工厂：

import React from 'react';

export default (componentFactory) =>
{
    return Component =>
    {
        class Factory extends React.Component
        {
            render()
            {
                let { state, props } = this;
                return componentFactory({ state, props }, Component);
            }
        }

        return Factory;
    };
}

然后是一个简单的页面组件包装器：

import React from 'react';

const Page = ({children, appState}) =>
    (
        <section>
            {React.cloneElement(children, {appState})}
        </section>
    );


export default Page;

因此，为了创建主页，我同样使用了 HomeFactory：

import React from 'react';
import Factory from '../Factory';

import HeroBanner from '../Banner/HeroBanner';

const HomeFactory = ({state, props}, HomePage) =>
{
    return <HomePage {...props} {...state} >
        <HeroBanner />
    </HomePage>;
};

export default Factory(HomeFactory);

那么最终挂载的HomePage组件代码如下：

import React from 'react';
import Page from '../Page';

import HomeFactory from '../HomeFactory';

const HomePage = ({children, appState}) =>
{
    return (
        <Page appState={appState}>
            {children}
        </Page>
    );
};

export default HomeFactory(HomePage);

问题似乎是 HomeFactory 组件，我在其中输入：

    return <HomePage {...props} {...state} >
        <HeroBanner />
    </HomePage>;

根据给出的示例，这 100% 正确地工作，但是，当我尝试以数组形式放置多个组件或仅嵌套多个组件时，例如：

    return <HomePage {...props} {...state} >
        <HeroBanner />
        <HeroBanner />
        <HeroBanner />
    </HomePage>;

我收到以下错误：

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

基本上，Page 包装器组件正在获取作为其父组件 HomePage 的子组件传入的属性，这些属性取自工厂方法。

问题是我无法执行以下操作的 JSX 隐式发生了什么？

Answer 1

在您的 Page 组件中，当您传递多个子项时，您需要使用 cloneElement 和 Children.map（this.props.children 是一个特殊的类数组对象）

查看此答案：Whosebug。com/a/38011851/3794660了解更多详情。

反应不通过工厂功能渲染多个组件

React not rendering multiple components through factory function

jsx

reactjs

react-jsx