編寫我的第一個 HOF 反應組件時出錯：如果您返回一個組件而不是返回一個組件，則可能會發生這種情況<Component />

Question

我正在編寫一個非常簡單的反應組件，但是我嘗試過的所有內容都出現控制台錯誤。

在我的主要渲染中：

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

高階組件的參數是要包裝的組件的類（或函數），而不是該組件的實例。

您要做的是通過將 HOC 應用於包裝/內部組件來創建一個新組件。 這應該發生在 render() 之外，因為它應該只發生一次，而不是在每次重新渲染時發生。

  const FetchableSubreddits = withFetch(Subreddits);

然后在你的渲染中你可以像任何其他 JSX 組件一樣使用它。

<FetchableSubreddits someProp={someValue} />