我无法在react-dom/client中使用createRoot函数

Question

import React from 'react';
import * as ReactDOMClient from 'react-dom/client';
import App from './App';
import reportWebVitals from './reportWebVitals';


const rootElement = document.getElementById("root");
// This opts into the new behavior!
ReactDOMClient.createRoot(rootElement as HTMLElement).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

reportWebVitals();

如果执行此代码，则会出现如下错误。

找不到模块“react-dom/client”的声明文件。'E:/Workspace/React/welcomedev-react-starter/node_modules/react-dom/client.js' 隐式具有 'any' 类型。尝试它是否存在或添加包含 1 |npm i --save-dev @types/react-dom的新声明 (.d.ts) 文件 declare module 'react-dom/client';从“反应”导入反应；

2 | 从'react-dom/client'导入*作为ReactDOMClient; | ^^^^^^^^^^^^^^^^^^^^ 3 | 从“./App”导入应用程序；4 | 从'./reportWebVitals'导入reportWebVitals；

我想要答案。

Answer 1

确保您安装了正确的类型版本。尝试运行：

npm install --save-dev @types/react@18 @types/react-dom@18

不要依赖 IDE 来正确获取所有内容。就我而言，我必须手动输入导入并使用，createRoot如下所示：

import { createRoot } from 'react-dom/client';

const root = createRoot(document.getElementById('root')!);   // notice the '!'
root.render(<App />);

请注意，您需要如何通过感叹号（“！”）告诉打字稿您确定您的根不会为空。请参阅“客户端渲染 API 更新”中的更多信息

Answer 2

如果您将 TypeScript 与 React 一起使用，那么您需要导入支持类型并满足其他 TypeScript 条件的相对依赖项。所以尝试运行命令npm i --save-dev @types/react-dom

如果您正在使用不支持打字稿的依赖项，那么您可以使用此方法。希望这可以帮助。

打字稿。如果模块没有@types怎么办？