React 错误Argument type 'HTMLElement or null' not assignable to parameter type 'Element or Document

  • Z时代
  • 2024-01-10
  • 分类：综合

使用非空断言或类型断言来解决 React.js 错误“Argument of type 'HTMLElement | null' is not assignable to parameter of type 'Element | DocumentFragment'”，例如 const root = createRoot(rootElement!) 。

React HTMLElement or null' not assignable to parameter 错误

下面是产生该错误的示例

importAppfrom'./App';
import {StrictMode} from'react';
import {createRoot} from'react-dom/client';
const rootElement = document.getElementById('root');
// Argument of type 'HTMLElement | null' is not
// assignable to parameter of type 'Element | DocumentFragment'.
// Type 'null' is not assignable to type 'Element | DocumentFragment'.ts(2345)
const root = createRoot(rootElement);
root.render(
<StrictMode>
<App />
</StrictMode>,
);

这里的问题是 document.getElementById 方法的返回类型是 HTMLElement | null 。

如果提供的 id 在 DOM 中不存在，则该方法返回 null。

另一方面，createRoot 方法的预期参数类型是 Element | DocumentFragment，因此提供的参数类型与预期的参数类型不匹配。

解决错误的一种方法是使用非空 (!) 断言运算符。

importAppfrom'./App';
import {StrictMode} from'react';
import {createRoot} from'react-dom/client';
const rootElement = document.getElementById('root');
//  non-null (!) assertion
const root = createRoot(rootElement!);
root.render(
<StrictMode>
<App />
</StrictMode>,
);

非 null (!) 断言运算符从类型中删除 null 和 undefined 而不进行任何显式类型检查。

当你使用这种方法时，你基本上告诉 TypeScript rootElement 变量永远不会为空或未定义。 因此，rootElement 变量的类型变为 HTMLElement 而不是 HTMLElement | null 。

或者，我们可以使用简单的类型断言。

importAppfrom'./App';
import {StrictMode} from'react';
import {createRoot} from'react-dom/client';
const rootElement = document.getElementById('root');
// 使用类型断言
const root = createRoot(rootElement asElement);
root.render(
<StrictMode>
<App />
</StrictMode>,
);

当我们有关于 TypeScript 无法知道的值的类型的信息时，使用类型断言。

我们实际上是在告诉 TypeScript，rootElement 变量存储了一个 Element 类型的值，不用担心它。

我们从错误消息中确定了正确的类型：“'HTMLElement | null' 类型的参数不可分配给'Element | DocumentFragment' 类型的参数”。

有了这个错误消息，TypeScript 告诉我们：函数的预期参数类型是 Element | DocumentFragment，但您使用 HTMLElement | null 类型的参数调用该函数。

类型不兼容，因为参数类型可能为 null。

为了解决这个错误，我们必须使传入的参数和预期的参数类型兼容。

本文转载自：迹忆客（https://www.jiyik.com）

以上是 React 错误Argument type 'HTMLElement or null' not assignable to parameter type 'Element or Document 的全部内容， 来源链接： utcz.com/z/290325.html

回到顶部