Есть ли тип 'Node' на JavaScript / TypeScript? TS (2345)

Question

Я пытаюсь создать модал на React и использую TypeScript. Я получил ошибку «параметра типа Node» и не смог выяснить, что это такое (и впоследствии не исправить мою проблему).

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

Answer 1

Проблема машинописи в том, что здесь идет речь не о Node. Node является универсальным c элементом DOM, а HTMLDivElement соответствует правильно. Проблема в том, что null может принимать значение, а null явно не Node, поэтому вы не можете использовать ноль в appendChild.

Вы должны добавить проверку, такую ​​как 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, что вы уверены, что элемент присутствует, и это ясно, учитывая ваш предыдущий код.