React HOC类什么都不返回

Question

我正面临一个我无法弄清楚的问题。 对于项目，我们使用React使用以下代码（简化）从JSON输入生成布局：

function generateComponents(children, params) {
  let comps = [];
  if (!children || children && children.length === 0) {
    return [];
  }

  forEach(children, (comp) => {
      let compName = comp.component;
      let createdComp;
      switch (compName) {
        case 'test1':
          createdComp = TestOne(Object.assign({}, comp, params));
          break;
        case 'test2':
          createdComp = TestTwo(Object.assign({}, comp, params));
          break;
      }
      comps.push(createdComp)
    }
  }
  return comps.length === 1 ? comps[0] : comps;
}

这很好，并且正确生成了布局。 我们希望更进一步，将createdComp包装在Higher Order Component 。 我们通过以下方式实现了这一点：

function generateComponents(children, params) {
  // see above for implementation

  let component;

  if (condition)
    component = testingHOC(createdComp);
  else
    component = createdComp

  comps.push(component);
}

// TestingHOC.js
export function testingHoc(WrappedComponent) {
  console.log('wrapped')
  return class TestingHoc extends Component {
    render() {
      console.log('props TestingHOC', this.props);
      return ( <WrappedComponent { ...this.props} />);
    }
  }
};

这打破了我们的组件生成。 代码什么都不返回。 记录的唯一内容是console.log('wrapped') ，从不调用类的render函数。 我们在这里失踪了什么？

编辑：渲染类的渲染方法：

render() {
    const children = this.state.children;
    const {params} = this.props;
    const arrChildren = isArray(children) ? children : [children];
    let comps = generateComponents(arrChildren, params || {});
    if (isArray(comps)) {
        return (
            <ViewComponent>
                {comps}
            </ViewComponent>
        );
    } else {
        return comps;
    }
}

编辑2：

带有testingHoc的{comps}的Console.log 没有 testingHoc的{comps}的Console.log

编辑3

添加了ViewComponent的代码：

import React from 'react';

const ViewComponent = (props) => (
    <div {...props}/>
);

export default ViewComponent;

Answer 1

您面临的问题是由于React元素和React组件之间的固有差异。

当您不使用HOC时，您正在创建一个可以通过第一个console.log映像看到的React元素。 这是对帐发生后的输出。

当您使用HOC时，您的HOC会返回一个组件，该组件在您的第二个console.log映像中显示为test(props)功能。

要使用HOC增强组件具有相同的功能，需要将generateComponents函数中的代码更改为

  if (condition){
     let Comp = testingHOC(createdComp);
     component = <Comp/>;
  }

Answer 2

尝试

    ...
    return (
        <ViewComponent>
            {comps.map((Comp) => <Comp />)}
        </ViewComponent>
    );
    ...

要么

    ...
    return (
        <ViewComponent>
            {comps.map((comp) => comp())}
        </ViewComponent>
    );
    ...