React 18 - 类型“null”不可分配给类型“Element |” 文档片段'

Question

我想练习 React 18，最初我收到了弃用警告，我已经使用createRoot进行了更改。现在我面临一个错误说明

TS2345：“HTMLElement | ”类型的参数 null' 不可分配给类型为 'Element | 的参数 文档片段'。类型“null”不可分配给类型“Element |” 文档片段'。

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";

const root = ReactDOM.createRoot(document.getElementById("root")); // error: Type 'null' is not assignable to type 'Element | DocumentFragment'
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

reportWebVitals();

Answer 1

这里的问题是 document.getElementById 方法的返回类型是 HTMLElement | 无效的。但另一方面，createRoot方法的预期参数类型是 Element | DocumentFragment，因此提供的参数类型与预期的参数类型不匹配。

正确的方法是给出 Element 的类型定义或使用!

const root = ReactDOM.createRoot(document.getElementById("root") as Element); 

或者

const root = ReactDOM.createRoot(document.getElementById("root")!);