在使用createRoot app并将index.js ReactDOM.render更新为Reactive18之后,我会得到以下错误:“警告:您正在从不支持的‘React’导入createRoot,而应该从‘react/client’导入它。”
Index.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>
);
发布于 2022-04-04 21:11:05
最近,createRoot
在React 18 RC (RC 1),来源中被转移到react-dom/client
。
所以,现在你可以这样做:
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 更多信息创建奇偶。
发布于 2022-04-09 14:41:56
对于所有的类型记录用户,如果您得到了经典的“未找到此模块的类型”警告,请添加此命令。
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};
}
发布于 2022-04-06 07:53:00
确保您的react dom版本是"^18.0.0"
。
https://stackoverflow.com/questions/71743492
复制相似问题