弃用通知：ReactDOM.render 在 React 18 中不再受支持

javascript reactjs

2022-08-30 05:40:22

每次我创建一个新的 React 应用程序时，我都会收到此错误：

警告：ReactDOM.render 在 React 18 中不再受支持。请改用 createRoot。在你切换到新的 API 之前，你的应用将表现得好像它正在运行 React 17。知道更多： https://reactjs.org/link/switch-to-createroot

我该如何修复它？

我使用以下命令创建了我的 React 应用程序：

npx create-react-app my-app

答案 1

在文件索引.js中，更改为：

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";

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

reportWebVitals();

答案 2

React 18 于 2022 年 3 月 29 日发货。在 React 18 中已被弃用，当前发出警告并以兼容模式运行。ReactDOM.render

弃用

react-dom：ReactDOM.render 已被弃用。使用它将警告并在 React 17 模式下运行您的应用程序。
react-dom：已弃用。使用它将警告并在 React 17 模式下运行您的应用程序。ReactDOM.hydrate
react-dom：已弃用。ReactDOM.unmountComponentAtNode
react-dom：已弃用。ReactDOM.renderSubtreeIntoContainer
react-dom/server：已弃用。ReactDOMServer.renderToNodeStream

要解决此问题，您可以恢复到以前版本的 React 或更新索引.js文件以与 React 18 语法保持一致。

例：

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