从 react-dom/client 导入 createRoot 的问题

Question

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

索引.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在 React 18 RC (RC 1) 中被移至react-dom/client，Source

所以，现在你可以这样做：

import * as ReactDOMClient from 'react-dom/client';
ReactDOMClient.createRoot(/*...*/);

在你的情况下，这应该是

import React from 'react';
import ReactDOM from 'react-dom';
import * as ReactDOMClient from 'react-dom/client';
import Switch from './components/Switch';

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

动机：这种变化有两个原因。

首先，它允许组件使用同构 API，例如 flushSync 而不拉入特定于客户端的条目。这表示 如果你的服务器渲染一个只使用 flushSync 的组件 客户端，服务器不需要引入特定于客户端的代码 对于 createRoot 或 hydrateRoot。

其次，它创建了与 react-dom/server 的对等 More Info

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};
}

Answer 3

确保你的 react-dom 版本是"^18.0.0"

Answer 4

导入“ReactDOM”时需要添加“/client”。

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

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