我不能在 react-dom/client 中使用 createRoot function

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'; 1 | 從“反應”導入反應；

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

請注意您需要如何告訴 typescript 您確定您的根不會為帶有感嘆號（'！'）的空值。 在“客戶端渲染 API 更新”中查看更多信息

Answer 2

如果您使用帶有 react 的 typescript，則需要導入支持類型並滿足其他 typescript 條件的相關依賴項。 所以嘗試運行命令npm i --save-dev @types/react-dom

如果您正在使用不支持 typescript 的依賴項，那么您可以使用此方法。 希望這可以幫助。

打字稿。 如果模塊沒有@types怎么辦？

Answer 3

我從https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html#updates-to-client-rendering-apis得到了這個例子

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 4

在createRoot()之前使用ReactDOM確實可以解決這個問題。 例子-

ReactDOM.createRoot(rootElement)