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

Question

每次创建新的 React 应用程序时都会出现此错误：

警告：ReactDOM.render 在 React 18 中不再支持。请改用 createRoot。在您切换到新 API 之前，您的应用程序的行为就像运行 React 17 一样。了解更多信息：https ://reactjs.org/link/switch-to-createroot

我该如何修复它？

我使用以下方法创建了我的 React 应用程序：

npx create-react-app my-app

Answer 1

在文件index.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();

对于打字稿

来自下面评论部分的回答：Kibonge Murphy

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") as HTMLElement);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

reportWebVitals();

Answer 2

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

弃用

弃用

• react-dom:ReactDOM.render已被弃用。使用它会发出警告并以 React 17 模式运行您的应用程序。
• react-dom:ReactDOM.hydrate已被弃用。使用它会发出警告并以 React 17 模式运行您的应用程序。
• react-dom:ReactDOM.unmountComponentAtNode已被弃用。
• react-dom:ReactDOM.renderSubtreeIntoContainer已被弃用。
• react-dom/server:ReactDOMServer.renderToNodeStream已被弃用。

要解决此问题，您可以恢复到以前版本的 React 或更新您的 index.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>
);

Answer 3

代替：

import ReactDOM from 'react-dom'
ReactDom.render(<h1>Your App</h1>, document.getElementById('root'))

使用：

import { createRoot } from 'react-dom/client'
createRoot(document.getElementById('root')).render(<h1>Your App</h1>)

更多详情请点击此处

Answer 4

前

import { render } from 'react-dom';
const container = document.getElementById('app');
render(<App tab="home" />, container);

后

import { createRoot } from 'react-dom/client';
const container = document.getElementById('app');
const root = createRoot(container);
root.render(<App tab="home" />);

在你的index.js文件之前：

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

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);


reportWebVitals();

将其如下更改到您的index.js文件中：

import React from 'react';

import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

import { createRoot } from 'react-dom/client';
const container = document.getElementById('root');
const root = createRoot(container);
root.render(<React.StrictMode>
  <App />
</React.StrictMode>);


reportWebVitals();

Answer 5

旧版根 APIReactDOM.render已在 React 18 中弃用，并替换为使用createRoot. 应用程序的根是包含所有渲染组件的顶级 DOM 元素，通常是<div>ID 为root.

React 18 仍然有支持，ReactDOM.render因此从技术上来说你不需要更新，但你无法确定这种支持会持续多久。

您可以在https://thelonecoder.dev/javascript/react-js/reactdom-render-vs-createroot/ReactDOM.render找到有关和之间差异的更多信息。createRoot

要更新到新的根 API，请将index.js文件更改为如下所示：

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

const root = createRoot(document.getElementById('root'));
root.render(<App />);

Answer 6

为了提供或多或少与以前版本的 React 等效的版本，我使用了上面的这个稍微精简的版本，仍然<App>用<React.StrictMode>.

我浓缩这一点的另一个原因是 - 在我的特定管道中 - 我永远不需要访问根变量，因此，将语句链接在一起对我来说更有意义，整个文件只有五行代码：

import React from 'react';
import ReactDOM from "react-dom/client";

import './index.css';
import App from './App';

    ReactDOM.createRoot(document.querySelector("#root")).render(<React.StrictMode><App /></React.StrictMode>);

（PS：不要忘记您是否需要 webvitals 功能也添加到上述代码中）

最后，我使用 WebStorm IDE 将此起始代码保存为实时模板。根据您的 IDE，您的代码片段的调用方式可能会有所不同，但其想法应该是相似的。

Answer 7

正如您的错误所述，不再支持 ReactDOM.render。所以使用新的createRoot。

正如您从下面的代码中看到的，（从文档中提取）您所要做的就是用 createRoot 替换 ReactDOM.render 。

// Before
import { render } from 'react-dom';
const container = document.getElementById('app');
render(<App tab="home" />, container);

// After
import { createRoot } from 'react-dom/client';
const container = document.getElementById('app');
const root = createRoot(container);
root.render(<App tab="home" />);

Answer 8

正如您所说，您使用npx create-react-app my-app创建了 React 应用程序。

命令执行后，您的 index.js 必须如下所示：

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

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals();

控制台中提到的编辑后的代码：

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

const container = document.getElementById('root');
const root = ReactDOM.createRoot(container);
root.render(<App />);

reportWebVitals();

Answer 9

在您的index.js文件中：

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

在 React 版本 18 之前使用它

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

在 React 版本 18 中使用它

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