Question

我需要将一个HOC传递给另一个不适用于我的HOC。我可能犯了一些错误

我已将问题简化为以下最小的工作示例：

我有一个更高阶的组件B：

export class B extends React.Component {
  render() {
    const { InnerInB } = this.props;
    return (
      <InnerInB
        { 
          //pass props here
        }
      />
    );
  }
}

我们将其导出如下：

export default InnerInB => props => <B { ...props } InnerInB={ InnerInB } />;

我还有另一个高阶组件A，它的道具中还有另一个组件InnerComponent。

export const A = (props) => {
  const { InnerComponent} = props;

  return (
    <InnerComponent
// pass props here
     /> 
  );
};

，然后将此较高的组件导出为ExposedComponent：

import InnerInB from './B';
const ExposedComponent = InnerComponent => (props) => {
  //Some code here...
  return (<A { ...props } InnerComponent={ InnerComponent } />);
};

export default ExposedComponent;

InnerInB(ExposedComponent);

我还有另一个高阶组件B：

现在，当我在定义了InnerInB(A)的文件中调用A时。但是，此代码给出以下错误：

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

但是，当我将A从高阶分量更改为普通分量时，它可以工作。

Answer 1

回想一下，React组件必须是一个函数或一个类（根据错误消息），但是在A中，您都不返回任何内容，而返回的是<InnerComponent />，它是一个{{ 3}}（是的，术语令人困惑）：

export const A = (props) => {
  const { InnerComponent } = props;

  return (
    <InnerComponent
      // pass props here
    /> 
  );
};

您可能打算这样做：

export const A = (props) => {
  const { InnerComponent } = props;

  return () => (
    <InnerComponent
      // pass props here
    />
  );
};

反应：将HOC传递给另一个HOC，会导致元素类型无效错误

1 个答案: