Javascript 对调用的函数作出反应&引用；函数作为React子函数无效；

请看。我正在尝试创建一个react HOC，它接收一个函数组件和一个在HOC中被调用的函数

为此，我需要创建一个react组件来返回这个HOC。需要在HOC中调用的函数需要与react组件共享其作用域，因为它可能会更改组件的状态或进行api调用。我的尝试是尝试创建嵌套的react组件，但当我创建时，会出现以下错误：

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

如何创建一个既接受react组件又接受要调用的函数的react HOC？谢谢代码也可以在下面找到：

index.tsx:

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

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

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;

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;

import*as React from“React”；
从“react dom”导入{render}；
从“/SampleComponent”导入SampleComponent；
render（，document.getElementById（“根”））；

sampleWrapper.tsx:

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

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

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;

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;

import*as React from“React”；
常量样本包装=(
WrappedComponent:React.FC，
OnButton单击：（）=>void
)：React.FC=>{
常量组件：React.FC=（）=>(
点击我
);
返回组件；
};
导出默认的sampleWrapper；

sampleComponent.tsx:

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

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

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;

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;

import*as React from“React”；
从“/sampleWrapper”导入sampleWrapper；
常量SampleComponent:React.FC=（）=>{
const[title，setTitle]=React.useState（“hello world”）；
const handleTitleChange=（）：void=>{
setTitle（“这是一个新标题”）；
};
常量SampleInnerComponent:React.FC=（）=>{title}；
返回sampleWrapper（SampleInnerComponent，HandleteChange）；
};
导出默认采样组件；

您似乎没有返回React元素，而是返回组件。您希望返回元素React.ReactElemnt。这就是你想要的我想：

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


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

const sampleWrapper=(
WrappedComponent:React.FC，
OnButton单击：（）=>void
)：React.FC=>{
返回(
点击我
);
};

另一种选择：

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;

import*as React from“React”；
常量样本包装=(
WrappedComponent:React.FC，
OnButton单击：（）=>void
)：React.FC=>{
常量组件：React.FC=（）=>(
点击我
);
返回；
};
导出默认的sampleWrapper；

您似乎没有返回React元素，而是返回组件。您希望返回元素React.ReactElemnt。这就是你想要的我想：

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


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

const sampleWrapper=(
WrappedComponent:React.FC，
OnButton单击：（）=>void
)：React.FC=>{
返回(
点击我
);
};

另一种选择：

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;

import*as React from“React”；
常量样本包装=(
WrappedComponent:React.FC，
OnButton单击：（）=>void
)：React.FC=>{
常量组件：React.FC=（）=>(
点击我
);
返回；
};
导出默认的sampleWrapper；

因为您的

sampleWrapper

返回一个功能组件。您需要做的是将返回的函数组件保存到变量中，并以与函数组件相同的方式呈现该组件。i、 e

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;

import*as React from“React”；
从“/sampleWrapper”导入sampleWrapper；
常量SampleComponent:React.FC=（）=>{
const[title，setTitle]=React.useState（“hello world”）；
const handleTitleChange=（）：void=>{
setTitle（“这是一个新标题”）；
};
常量SampleInnerComponent:React.FC=（）=>{title}；
const ReturnedSampleComponent=sampleWrapper（SampleInnerComponent，HandleteChange）；
返回；
};
导出默认采样组件；

---

当您的

sampleWrapper

返回一个功能组件时，您可以选中此项。您需要做的是将返回的函数组件保存到变量中，并以与函数组件相同的方式呈现该组件。i、 e

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;

import*as React from“React”；
从“/sampleWrapper”导入sampleWrapper；
常量SampleComponent:React.FC=（）=>{
const[title，setTitle]=React.useState（“hello world”）；
const handleTitleChange=（）：void=>{
setTitle（“这是一个新标题”）；
};
常量SampleInnerComponent:React.FC=（）=>{title}；
const ReturnedSampleComponent=sampleWrapper（SampleInnerComponent，HandleteChange）；
返回；
};
导出默认采样组件；

您可以检查此返回。您需要返回一个组件实例。

return。您需要返回一个组件实例。