如何在TypeScript中使用createPortal时避免多余div？

我懂你的痛点——不想多套一层冗余的div，用DocumentFragment确实能完美解决结构问题，但TypeScript的类型检查却卡壳了对吧？别担心，有几个靠谱的办法能搞定这个TS2345错误：

方案一：类型断言（快速直接） #

React底层其实是支持把Portal挂载到DocumentFragment上的，只是TypeScript的类型定义默认限制了第二个参数为Element。我们可以用类型断言告诉TypeScript放宽这个检查：

import { useEffect, createPortal } from 'react';

// 把DocumentFragment断言为Element，绕过TS类型检查
const containerEle = document.createDocumentFragment() as Element;

const App = function(){
  useEffect(()=>{
    document.body.appendChild(containerEle);
    return ()=>{
      document.body.removeChild(containerEle);
    }
  },[])
  
  return createPortal(<div className="my-component"/>, containerEle);
}

这个方法最简单，不会影响运行时逻辑，毕竟React本身完全支持DocumentFragment作为Portal的容器。

方案二：扩展React类型定义（更严谨） #

如果不想用断言，也可以通过扩展React的类型声明，让createPortal的参数类型支持DocumentFragment。

在项目根目录创建一个react.d.ts文件，写入以下内容：

declare module 'react' {
  // 重写createPortal的类型，允许第二个参数为Element或DocumentFragment
  function createPortal(
    children: React.ReactNode,
    container: Element | DocumentFragment,
    key?: null | string
  ): React.ReactPortal;
}

// 确保这个文件被TypeScript识别
export {};

这样TypeScript就会自动识别DocumentFragment作为createPortal的合法容器，不需要修改业务代码，适合追求类型严谨性的大型项目。

两种方案都能解决你的问题，根据项目场景选就行～

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