javascript - 我不能在 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' 类型。尝试 npm i --save-dev @types/react-dom 如果它存在或添加一个包含 declare module 'react-dom/client' 的新声明 (.d.ts) 文件； 1 |从“ react ”导入 react ；

2 | import * as ReactDOMClient from 'react-dom/client';| ^^^^^^^^^^^^^^^^^^3 | import App from './App';4 | import reportWebVitals from './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 />);

请注意您需要如何用感叹号(“!”)告诉 typescript 您确定您的根不会为空。在 'Updates to Client Rendering APIs' 中查看更多信息