状态提升至父组件时Carbon React组件TS2604错误求解

问题背景 #

需要将控制弹窗的open状态从子组件提升至父组件，修改Carbon React的ModalStateManager组件后，IDE抛出TS2604错误：JSX元素类型ModalContent没有构造或调用签名。

原始组件代码 #

const ModalStateManager = ({
  renderLauncher: LauncherContent,
  children: ModalContent,
}) => {
  const [open, setOpen] = useState(false);
  return (
    <>
      {!ModalContent || typeof document === 'undefined'
        ? null
        : ReactDOM.createPortal(
            <ModalContent open={open} setOpen={setOpen} />,
            document.body
          )}
      {LauncherContent && <LauncherContent open={open} setOpen={setOpen} />}
    </>
  );
};

尝试修改后的代码 #

import ReactDOM from "react-dom";
import { LauncherContent, ModalContent } from "@carbon/react";
import React from "react";

type Props = {
  renderLauncher?: unknown;
  children?: unknown;
  open: boolean;
  setOpen: (newOpen: boolean) => void;
};
export const LiftedModalStateManager: React.FC<Props> = ({
  renderLauncher: LauncherContent,
  children: ModalContent,
  open,
  setOpen,
}) => {
  return (
    <>
      {!ModalContent || typeof document === "undefined"
        ? null
        : ReactDOM.createPortal(
            <ModalContent open={open} setOpen={setOpen} />,
            document.body,
          )}
      {LauncherContent && <LauncherContent open={open} setOpen={setOpen} />}
    </>
  );
};

组件核心工作原理 #

• LauncherContent：作为弹窗的触发组件（如按钮），接收open（当前弹窗状态）和setOpen（状态更新方法）作为props，用于触发弹窗的显示/隐藏操作。
• ModalContent：作为弹窗的内容容器，同样接收open和setOpen props，open控制弹窗是否渲染，setOpen用于关闭弹窗。
• 原始ModalStateManager逻辑：内部维护open状态，通过ReactDOM.createPortal将弹窗挂载到document.body（规避样式层级冲突），同时渲染触发组件与弹窗内容。

TS2604错误解决 #

错误原因 #

Props类型定义错误：将children和renderLauncher标记为unknown，TypeScript无法识别它们是可渲染的React组件类型，因此无法作为JSX元素调用。

修正方案 #

1. 定义子组件所需的props类型，明确open和setOpen的类型。
2. 将renderLauncher和children的类型改为React.ComponentType，指定它们接收的props类型。
3. 移除错误的import { LauncherContent, ModalContent } from "@carbon/react";——这两个不是Carbon官方导出的组件，而是需要通过props传入的自定义组件。

修正后的完整代码 #

import ReactDOM from "react-dom";
import React from "react";

// 定义子组件接收的props类型
type ModalChildProps = {
  open: boolean;
  setOpen: (newOpen: boolean) => void;
};

// 定义LiftedModalStateManager的props类型
type Props = {
  renderLauncher?: React.ComponentType<ModalChildProps>;
  children: React.ComponentType<ModalChildProps>;
  open: boolean;
  setOpen: (newOpen: boolean) => void;
};

export const LiftedModalStateManager: React.FC<Props> = ({
  renderLauncher: LauncherContent,
  children: ModalContent,
  open,
  setOpen,
}) => {
  return (
    <>
      {typeof document !== "undefined" ? (
        ReactDOM.createPortal(
          <ModalContent open={open} setOpen={setOpen} />,
          document.body
        )
      ) : null}
      {LauncherContent && <LauncherContent open={open} setOpen={setOpen} />}
    </>
  );
};

父组件使用示例 #

import { useState } from "react";
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from "@carbon/react";
import { LiftedModalStateManager } from "./LiftedModalStateManager";

// 自定义触发按钮组件
const CustomLauncher = ({ open, setOpen }: ModalChildProps) => {
  return <Button onClick={() => setOpen(true)}>打开弹窗</Button>;
};

// 自定义弹窗内容组件
const CustomModal = ({ open, setOpen }: ModalChildProps) => {
  return (
    <Modal open={open} onRequestClose={() => setOpen(false)}>
      <ModalHeader>弹窗标题</ModalHeader>
      <ModalBody>弹窗内容区域</ModalBody>
      <ModalFooter>
        <Button onClick={() => setOpen(false)}>取消</Button>
        <Button onClick={() => setOpen(false)} kind="primary">确认</Button>
      </ModalFooter>
    </Modal>
  );
};

export const ParentComponent = () => {
  const [modalOpen, setModalOpen] = useState(false);

  return (
    <LiftedModalStateManager 
      open={modalOpen} 
      setOpen={setModalOpen} 
      renderLauncher={CustomLauncher}
    >
      {CustomModal}
    </LiftedModalStateManager>
  );
};

内容的提问来源于stack exchange，提问作者Gavaii