JavaScript / TypeScript 上是不是有“节点”类型？ ts(2345)

Posted 2023-02-22

【中文标题】JavaScript / TypeScript 上是不是有“节点”类型？ ts(2345)

【英文标题】：Is there a type 'Node' on JavaScript / TypeScript? ts(2345)JavaScript / TypeScript 上是否有“节点”类型？ ts(2345)

【发布时间】：2020-08-08 21:13:48

【问题描述】：

我正在尝试在 React 上创建一个 Modal，并且正在使用 TypeScript。我收到“节点类型参数”的错误，无法弄清楚这是什么（也无法解决我的问题）。

const Modal = ( children :  children: any ) => 
  const elRef = useRef<htmlDivElement | null>(null); //tried adding'| Node'
  if (!elRef.current) 
    const div = document.createElement("div");
    div.className = "modalDiv";
    elRef.current = div;
  

  useEffect(() => 
    const modalRoot = document.getElementById("modal");
//Argument of type 'HTMLDivElement | null' is not assignable to parameter of type 'Node'.
//Type 'null' is not assignable to type 'Node'.ts(2345)
    modalRoot!.appendChild(elRef.current);

    return () => modalRoot!.removeChild(elRef.current);
  , []);

  return createPortal(<div>children</div>, elRef.current);
;

【问题讨论】：

有ReactNode***.com/questions/58123398/…

我尝试添加 ReactNode 但这并没有解决我的问题

要回答标题中的问题（看起来和正文中的问题不太一样），Node 是 HTML 操作中最基本的概念之一。

ReactNode 在这里不相关

请更改问题标题，这具有误导性，请尝试使用 TS 错误和上下文。

【参考方案1】：

打字稿在这里发出信号的问题与Node 无关。 Node 是一个通用的 DOM 元素，HTMLDivElement 匹配正确。问题在于它可能假设的null 值，而null 显然不是Node，因此您不能在appendChild 中使用null。

您应该添加类似if (elRef.current != null) ... 的检查，以确保已正确创建HTMLDivElement。

useEffect(() => 
    const modalRoot = document.getElementById("modal");
    if (elRef.current) modalRoot!.appendChild(elRef.current);

    return () => 
      if (elRef.current) modalRoot!.removeChild(elRef.current);
    
  , []);

一种更简单的方法（在这种情况下，是一种更合乎逻辑的方法）就是使用 elRef.current! 告诉 TS 您确定该元素存在，鉴于您的以前的代码。