弃用通知: ReactDOM.render 在 React18中不再支持

每次创建一个新的 React 应用程序时，我都会遇到这个错误:

警告: ReactDOM.render 在 React18中不再支持。改为使用 createRoot。在你切换到新的 API 之前，你的应用程序会表现得像是在运行 React 17。了解更多: https://reactjs.org/link/switch-to-createroot

我该怎么补救？

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

npx create-react-app my-app
206085 次浏览
小开
最佳答案

在文件 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();
小开

正如您的错误所述，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" />);
小开

为了提供与以前版本的 React 或多或少的等价物，我使用了上述版本的略微压缩的版本，仍然围绕着 <App>和 <React.StrictMode>。

我压缩这个代码的另一个原因是——在我的特定管道中——我从不需要访问根变量，因此，将语句连接在一起对我来说更有意义，而且整个文件只有5行代码:

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

(附注: 不要忘记如果你需要 webvitals 功能也添加到上面的代码)

最后，我使用 WebStorm IDE 将这个初学者代码保存为 Live Template。根据 IDE 的不同，可以对代码段进行不同的调用，但其思想应该是相似的。

小开

如前所述，您使用 创建-反应-应用程序创建了 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();

小开

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

反对意见

反对意见

  • react-dom: ReactDOM.render已被废弃。使用它将警告和运行您的应用程序在反应17模式。
  • react-dom: ReactDOM.hydrate已被废弃。使用它将警告和运行您的应用程序在反应17模式。
  • ReactDOM.unmountComponentAtNode已被弃用。
  • ReactDOM.renderSubtreeIntoContainer已被弃用。
  • 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>
);
小开

在你的 Index.js文件中:

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

在反应版本18之前使用这个

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

在 React 版本18中使用这个

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

这个应该可以:

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


const root = createRoot(document.getElementById("root"))
root.render
(
<App />
)
小开

之前

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();
小开

如果您的应用程序正在使用 React-Router，那么以下代码可以正常工作:

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

它将工作完美(与反应路由器)。

小开

而不是:

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

更多细节 给你

小开 
import React, {createRoot} from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import "./styles.css";




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

在反应18。对于那些使用自定义 网络包配置，遵循 Ref = “ https://github.com/pmmwh/response-Refresh-Webpack-Plugin”rel = “ nofollow norefrer”> React Refresh Webpack Plugin 。他们有一些内置的 HMR。

我们应该使用由反应小组开发的 快速刷新。

它为我解决了那个错误消息。

小开

用途:

import ReactDOM from "react-dom/client";


const element = document.getElementById("root");


// Tell React to take control of that element
// In TypeScript, since there is a bug, you need to add the "!" element!
// https://github.com/DefinitelyTyped/DefinitelyTyped/issues/43848
const root = ReactDOM.createRoot(element!);




const App = () => {
return (
<React.StrictMode>
<div>
<h1>Hello world!</h1>
</div>
</React.StrictMode>
);
};


root.render(<App />);
小开

用途:

import React, { useEffect } from "react";
import { createRoot } from "react-dom/client";


const App: React.FC<{}> = () => {
useEffect(() => {
fetchOpenWeatherData("Toronto")
.then((data) => console.log(data))
.catch((err) => console.log(err));
}, []);


return (
<div>
<img src="icon.png" />
</div>
);
};


const rootEl = document.createElement("div");
document.body.appendChild(rootEl);
const root = createRoot(rootEl);
root.render(<App />);


提交答案