Reactjs 使逻辑组件在react中可重用

因此，我有几个非常相似的组件，具有相同的逻辑

import { useDetectClick } from 'src/utils/useDetectClick';
import ColumnMenu from 'src/components/presentational/menus/ColumnMenu';

const ColumnMenuContainer = () => {
  const [isActive, setIsActive] = useDetectClick(false);
  const onClick = (): void => {
   setIsActive(!isActive);
  };

 return (
  <>
   <ColumnMenu onClick={onClick} isActive={isActive} />
  </>
 );
};

export default ColumnMenuContainer;

从'src/utils/useDetectClick'导入{useDetectClick}；
从“src/components/presentational/menus/ColumnMenu”导入ColumnMenu；
const column容器=（）=>{
const[isActive，setIsActive]=useDetectClick（false）；
const onClick=（）：void=>{
setIsActive（！isActive）；
};
返回(
);
};
导出默认ColumnContainer；

另一个例子是：

import { useDetectClick } from 'src/utils/useDetectClick';
import TaskMenu from 'src/components/presentational/menus/TaskMenu';

const TaskMenuContainer = () => {
 const [isActive, setIsActive] = useDetectClick(false);
 const onClick = (): void => {
  setIsActive(!isActive);
};

 return (
  <>
   <TaskMenu onClick={onClick} isActive={isActive} />
  </>
 );
};

export default TaskMenuContainer;

从'src/utils/useDetectClick'导入{useDetectClick}；
从“src/components/presentational/menus/TaskMenu”导入任务菜单；
const TaskMenuContainer=（）=>{
const[isActive，setIsActive]=useDetectClick（false）；
const onClick=（）：void=>{
setIsActive（！isActive）；
};
返回(
);
};
导出默认TaskMenuContainer；

唯一的区别是它们返回的组件名称。我好像在重复我自己。我想知道如何使它可重用（如果可能的话）。我曾考虑将组件（taskMenu等）作为道具传递给一个通用菜单组件，但我在web上的任何地方都找不到类似的问题，也不知道如何做

编辑：

从'src/utils/useDetectClick'导入{useDetectClick}；
界面道具{
组件：React.ReactNode；
}
常量ClickableContainer:React.FunctionComponent=（{Component}）=>{
const[isActive，setIsActive]=useDetectClick（false）；
const onClick=（）：void=>{
setIsActive（！isActive）；
};
返回；
};
导出默认的可点击容器；

尝试此解决方案时，会出现以下错误：

JSX元素类型“Component”没有任何构造或调用签名

它在“组件”的下面

编辑-工作解决方案：

import { useDetectClick } from 'src/utils/useDetectClick';

interface NestedComponentProps {
  onClick: () => void;
  isActive: boolean;
}

interface Props {
  Component: React.FC<NestedComponentProps>;
}

const Menu: React.FC<Props> = ({ Component }) => {
  const [isActive, setIsActive] = useDetectClick(false);
  const onClick = (): void => {
    setIsActive(!isActive);
  };

  return <Component onClick={onClick} isActive={isActive} />;
};

export default Menu;

从'src/utils/useDetectClick'导入{useDetectClick}；
接口嵌套组件支柱{
onClick:（）=>void；
isActive：布尔型；
}
界面道具{
成分：React.FC；
}
常量菜单：React.FC=（{Component}）=>{
const[isActive，setIsActive]=useDetectClick（false）；
const onClick=（）：void=>{
setIsActive（！isActive）；
};
返回；
};
导出默认菜单；

您可以传递组件以用作道具。这里要记住的一个重要（但有点愚蠢）细节是变量名必须是大写

从'src/utils/useDetectClick'导入{useDetectClick}；
常量ClickableContainer=（{Component}）=>{
const[isActive，setIsActive]=useDetectClick（false）；
const onClick=（）：void=>{
setIsActive（！isActive）；
};
返回；
};
导出默认的可点击容器；

然后，您可以重复使用：

从“src/components/presentational/menus/TaskMenu”导入任务菜单；
从“src/components/presentational/menus/ColumnMenu”导入ColumnMenu；
从“./ClickableContainer”导入ClickableContainer；
const TaskMenuContainer=（）=>；
const column容器=（）=>；

您可以传递组件以用作道具。这里要记住的一个重要（但有点愚蠢）细节是变量名必须是大写

从'src/utils/useDetectClick'导入{useDetectClick}；
常量ClickableContainer=（{Component}）=>{
const[isActive，setIsActive]=useDetectClick（false）；
const onClick=（）：void=>{
setIsActive（！isActive）；
};
返回；
};
导出默认的可点击容器；

然后，您可以重复使用：

从“src/components/presentational/menus/TaskMenu”导入任务菜单；
从“src/components/presentational/menus/ColumnMenu”导入ColumnMenu；
从“./ClickableContainer”导入ClickableContainer；
const TaskMenuContainer=（）=>；
const column容器=（）=>；

似乎此解决方案不适用于typescript，请查看我编辑的问题。我终于用typescript找到了工作解决方案，这在我的问题中。似乎此解决方案不适用于typescript，请查看我编辑的问题。我终于用typescript找到了工作解决方案，这在我的问题中。

import { useDetectClick } from 'src/utils/useDetectClick';

interface NestedComponentProps {
  onClick: () => void;
  isActive: boolean;
}

interface Props {
  Component: React.FC<NestedComponentProps>;
}

const Menu: React.FC<Props> = ({ Component }) => {
  const [isActive, setIsActive] = useDetectClick(false);
  const onClick = (): void => {
    setIsActive(!isActive);
  };

  return <Component onClick={onClick} isActive={isActive} />;
};

export default Menu;