从react-dom/client导入createRoot时出现问题

Question

使用 create-react-app 并将 index.js ReactDOM.render 更新到 React 18 后，我收到此错误：“警告：您正在从不受支持的“react-dom”导入 createRoot。您应该从“react”导入它-dom/客户端'"。

索引.js：

import React from 'react';
import ReactDOM from 'react-dom';
import { createRoot } from 'react-dom/client';
import Switch from './components/Switch';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Switch />
  </React.StrictMode>
);

Answer 1

收到的错误消息表明您应该导入createRoot方法 fromreact-dom/client而不是 from react-dom。

要解决此问题，请将您的导入语句修改为createRoot如下所示：

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

所以修改后的代码应该是：

import React from 'react';
import { createRoot } from 'react-dom/client';
import Switch from './components/Switch';

const root = createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Switch />
  </React.StrictMode>
);

Answer 2

对于所有打字稿用户，如果您收到经典的“未找到此模块的类型”警告，请添加此内容。

src/react-app-env.d.ts

declare module "react-dom/client" {
  // typing module default export as `any` will allow you to access its members without compiler warning
  var createRoot: any;
  export {createRoot};
}