用调用的函数反应 HOC； “函数作为 React 子级无效”答案

【问题标题】：React HOC with invoked functions; "Functions are not valid as a React child"用调用的函数反应 HOC； “函数作为 React 子级无效”
【发布时间】：2020-02-07 15:39:01
【问题描述】：

请参阅this codesandbox。我正在尝试创建一个 React HOC，它同时接收一个功能组件和一个在 HOC 中调用的函数。

为此，我需要创建一个返回此 HOC 的反应组件。需要在 HOC 中调用的函数需要与 react 组件共享它的作用域，因为它可能会做一些事情，比如更改组件的状态或进行 api 调用。我的尝试是尝试创建一个嵌套的反应组件，但是当我这样做时，我收到以下错误：

警告：函数作为 React 子级无效。如果您返回一个组件而不是从渲染中返回，则可能会发生这种情况。或者，也许您打算调用此函数而不是在 SampleComponent 中返回它

如何创建一个同时接受反应组件和要调用的函数的反应 HOC？谢谢！代码也可以在下面找到：

index.tsx：

import * as React from "react";
import { render } from "react-dom";
import SampleComponent from "./sampleComponent";

render(<SampleComponent />, document.getElementById("root"));

sampleWrapper.tsx：

import * as React from "react";

const sampleWrapper = (
  WrappedComponent: React.FC,
  onButtonClick: () => void
): React.FC => {
  const Component: React.FC = () => (
    <div>
      <button onClick={onButtonClick} type="button">
        Click Me
      </button>
      <WrappedComponent />
    </div>
  );

  return Component;
};

export default sampleWrapper;

sampleComponent.tsx：

import * as React from "react";
import sampleWrapper from "./sampleWrapper";

const SampleComponent: React.FC = () => {
  const [title, setTitle] = React.useState("hello world");

  const handleTitleChange = (): void => {
    setTitle("This is a new title");
  };

  const SampleInnerComponent: React.FC = () => <h1>{title}</h1>;

  return sampleWrapper(SampleInnerComponent, handleTitleChange);
};

export default SampleComponent;

【问题讨论】：

return <Component/>;。您需要返回一个组件实例。

标签： javascript reactjs typescript

【解决方案1】：

当您的 sampleWrapper 返回一个功能组件时。您需要做的是将返回的功能组件保存到一个变量中，并以与功能组件相同的方式呈现该组件。即

import * as React from "react";
import sampleWrapper from "./sampleWrapper";

const SampleComponent: React.FC = () => {
  const [title, setTitle] = React.useState("hello world");

  const handleTitleChange = (): void => {
    setTitle("This is a new title");
  };

  const SampleInnerComponent: React.FC = () => <h1>{title}</h1>;

  const ReturnedSampleComponent = sampleWrapper(SampleInnerComponent, handleTitleChange);

  return <ReturnedSampleComponent />;
};

export default SampleComponent;

你可以查看这个codesandbox

【讨论】：

【解决方案2】：

看来您返回的不是 React 元素，而是组件。你想返回元素 React.ReactElemnt。我想这就是你想要的：

const sampleWrapper = (
  WrappedComponent: React.FC,
  onButtonClick: () => void
): React.FC => {


  return (<div>
  <button onClick={onButtonClick} type="button">
    Click Me
  </button>
  <WrappedComponent />
</div>);
};

另一种选择：

import * as React from "react";

const sampleWrapper = (
  WrappedComponent: React.FC,
  onButtonClick: () => void
): React.FC => {
  const Component: React.FC = () => (
    <div>
      <button onClick={onButtonClick} type="button">
        Click Me
      </button>
      <WrappedComponent />
    </div>
  );

  return <Component/>;
};

export default sampleWrapper;

【讨论】：