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);
};

【问题讨论】：

有ReactNodestackoverflow.com/questions/58123398/…
我尝试添加 ReactNode 但这并没有解决我的问题
要回答标题中的问题（看起来和正文中的问题不太一样），Node 是 HTML 操作中最基本的概念之一。
ReactNode 在这里不相关
请更改问题标题，这具有误导性，请尝试使用 TS 错误和上下文。

标签： javascript reactjs typescript

【解决方案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 您确定该元素存在，鉴于您的以前的代码。

【讨论】：