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

Question

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

在我的主要渲染中：


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} 时，错误消失了。我犯了什么错误？

Answer 1

higher-order 组件的参数是要包装的组件的 class（或函数），而不是该组件的实例。

您要做的是通过将 HOC 应用于 wrapped/inner 组件来创建一个新组件。这应该发生在 render() 之外，因为它应该只发生一次而不是每个 re-render.

  const FetchableSubreddits = withFetch(Subreddits);

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

<FetchableSubreddits someProp={someValue} />

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

Error writing my first HOF react component: This may happen if you return a return a Component instead of <Component />

javascript

reactjs

typescript

higher-order-components