警告：React 18 不再支持 ReactDOM.render。请改用 createRoot。我该怎么办答案

【问题标题】：Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. How should i go about with this警告：React 18 不再支持 ReactDOM.render。请改用 createRoot。我该怎么办
【发布时间】：2023-02-22 01:48:57
【问题描述】：

这是我的 index.js 文件

import React from 'react';

import React DOM from 'react-Dom ';

import {BrowserRouter as Router} from 'react-router-Dom ';

import App from './App';

import './index.css'

  React DOM .render();

我是新手，所以对如何进行更改有点困惑

【问题讨论】：

reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html

标签： javascript reactjs

【解决方案1】：

您的代码应如下所示（将 'app' 替换为 'root' 或类似内容，无论您在 index.html 中的 <div> 是什么）

import React from 'react';
import { createRoot } from 'react-dom/client';
import {BrowserRouter as Router} from 'react-router-Dom ';
import App from './App';
import './index.css'

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

【讨论】：

【解决方案2】：

将您的 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();

【讨论】：

【解决方案3】：

import React from "react";
import { createRoot } from "react-dom/client";
import { Provider } from "react-redux";
import App from "App";
import store from "store";

// style + assets
import "assets/scss/style.scss";
import refreshTokenMiddleware from "services/setupInterceptor";

const container = document.getElementById("root") as HTMLElement;
const root = createRoot(container);

root.render(
  <Provider store={store}>
    <App />
  </Provider>
);

在 index.js/ts 文件中用这个替换你的代码

【讨论】：