首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >从react dom/client导入createRoot

从react dom/client导入createRoot
EN

Stack Overflow用户
提问于 2022-04-04 20:40:37
回答 3查看 19.8K关注 0票数 19

在使用createRoot app并将index.js ReactDOM.render更新为Reactive18之后,我会得到以下错误:“警告:您正在从不支持的‘React’导入createRoot,而应该从‘react/client’导入它。”

Index.js:

代码语言:javascript
运行
复制
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>
);
EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2022-04-04 21:11:05

最近,createRoot在React 18 RC (RC 1),来源中被转移到react-dom/client

所以,现在你可以这样做:

代码语言:javascript
运行
复制
import * as ReactDOMClient from 'react-dom/client';
ReactDOMClient.createRoot(/*...*/);

在你的例子中,这应该是

代码语言:javascript
运行
复制
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 更多信息创建奇偶。

票数 30
EN

Stack Overflow用户

发布于 2022-04-09 14:41:56

对于所有的类型记录用户,如果您得到了经典的“未找到此模块的类型”警告,请添加此命令。

src/react-app-env.d.ts

代码语言:javascript
运行
复制
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};
}
票数 4
EN

Stack Overflow用户

发布于 2022-04-06 07:53:00

确保您的react dom版本是"^18.0.0"

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/71743492

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档