我不能在 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/Rect/welcomedev React starter/node_modules/rect dom/client.js隐式地具有"any"类型。如果存在npm i --save-dev @types/react-dom，请尝试它，或者添加一个包含declare module 'react-dom/client';的新声明(.d.ts(文件1|import React from'React'；

2|从"react dom/client"导入*作为ReactDOMClient；|^^^^^^^^^^^^^^^^^^3|从"导入应用程序/应用程序'；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 />);

请注意，您需要告诉typescript，您确信您的根不会为带有感叹号('！'(的null。请参阅"客户端渲染API更新"中的更多信息

Answer 2

我从https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html#updates-到客户端呈现api

import { createRoot } from 'react-dom/client';
const container = document.getElementById('app');
const root = createRoot(container); // createRoot(container!) if you use TypeScript
root.render(<App tab="home" />);

你试过createRoot(container!)吗？

Answer 3

如果使用带有react的typescript，则需要导入支持类型并满足其他typescript条件的相对依赖项。所以试着运行命令npm i --save-dev @types/react-dom

如果您使用的依赖项不支持typescript，那么您可以使用此方法。希望这能有所帮助。

打字。如果模块没有'；t没有@类型？

Answer 4

在createRoot()之前使用ReactDOM确实解决了这个问题。示例-

ReactDOM.createRoot(rootElement)