ReactDOM.render is no longer supported in React 18,index.js 修改

刚使用命令 npx create-react-app myapp 生成的 code,console 有以下警告:

ReactDOM.render is no longer supported in React 18. Use createRoot instead.

在 React 18 中,ReactDOM.render 被废弃,当前发出警告,并以兼容模式运行。

index.js 改成下面这样:

import ReactDOM from "react-dom/client";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);

或者下面这样,警告就会消失:

import { StrictMode } from "react";
import { createRoot } from "react-dom/client"; 
import App from "./App"; 

const rootElement = document.getElementById("root");
const root = createRoot(rootElement); 

root.render( 
    <StrictMode>   
        <App /> 
	</StrictMode>);

其他被废弃的方法有:
react-dom: ReactDOM.hydrate has been deprecated. Using it will warn and run your app in React 17 mode.
react-dom: ReactDOM.unmountComponentAtNode has been deprecated.
react-dom: ReactDOM.renderSubtreeIntoContainer has been deprecated.
react-dom/server: ReactDOMServer.renderToNodeStream has been deprecated.

参考网页:https://dev.to/osmanforhad/react-js-warning-reactdomrender-is-no-longer-supported-in-react-18-use-createroot-instead-until-you-switch-to-the-new-api-1jhh

  • 2
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值