编写我的第一个 HOF 反应组件时出错：如果您返回一个组件而不是 <Component />，则可能会发生这种情况答案

【问题标题】：Error writing my first HOF react component: This may happen if you return a return a Component instead of <Component />编写我的第一个 HOF 反应组件时出错：如果您返回一个组件而不是 <Component />，则可能会发生这种情况
【发布时间】：2021-02-04 13:52:41
【问题描述】：

我正在编写一个非常简单的反应组件，但我尝试过的所有操作都出现控制台错误。

在我的主渲染中：


render() {
  const subreddits = withFetch(new Subreddits({}));
  ...
  {subreddits}
}

子版块：

class Subreddits extends React.Component<Record<string, unknown>, any> {
  displayName: string;
  constructor(props: any) {
    super(props);
    this.displayName = "Subreddits";
  }

  public render() {
    const data = this.props.data?.[0];
    const options = data?.map((e) => ({
      name: e,
      value: e,
    }));

    return (
      <SelectSearch
        search={true}
        options={options}
        value={this.props.input.h}
        name="reddit select"
        placeholder="Select"
        onChange={async (handle: string) => {
        }}
      />
    );
  }
}

我将 fetch 修改为更简单：

function withFetch(WrappedComponent) {
  return class extends React.Component {
    displayName: string;
    constructor(props) {
      super(props);
      this.displayName = "log";
    }

    componentDidMount() {
      console.log("Hello World!");
    }

    render() {
      return <WrappedComponent />;
    }
  };
}

export default withFetch;

请原谅目前糟糕的打字稿。这是我得到的错误：

Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.
    in div (created by InputGroup)
    in InputGroup (created by App)
    in div (created by App)
    in div (created by App)
    in App (created by HotExportedApp)
    in AppContainer (created by HotExportedApp)
    in HotExportedApp

好的，我意识到它说它不能渲染函数，但是我打开调试器，它不是函数而是对象。我尝试像函数一样调用它只是为了确定，但绝对不是。这留下了另一个选项if you return a Component instead of <Component /> 但是，对我来说似乎很好。当我注释掉{subreddits} 时，错误就消失了。我犯了什么错误？

【问题讨论】：

标签： javascript reactjs typescript higher-order-components

【解决方案1】：

高阶组件的参数是要包装的组件的类（或函数），而不是该组件的实例。

您要做的是通过将 HOC 应用于包装/内部组件来创建一个新组件。这应该在 render() 之外发生，因为它应该只发生一次，而不是在每次重新渲染时发生。

  const FetchableSubreddits = withFetch(Subreddits);

然后在您的渲染中，您可以像使用任何其他 JSX 组件一样使用它。

<FetchableSubreddits someProp={someValue} />

【讨论】：

谢谢。我没有提到它，但我之前确实尝试过使用类作为参数。但是，我没有尝试像您的示例中的任何其他 JSX 组件一样使用它，这就是诀窍。
很高兴你解决了它。基本上，将 HOC 应用于类所获得的价值本身就是一个类，而不是一个实例，因此您必须实例化它。我们使用 JSX 来做到这一点。