javascript - Notificare de deprecitare: ReactDOM.render nu mai este acceptat în React 18

Primeasc această eroare de fiecare dată când creez o nouă aplicație React:

Avertisment: ReactDOM.render nu mai este acceptat în React 18. Folosește createRoot în schimb. Până când treci la noul API, aplicația ta se va comporta ca și cum ar rula React 17. Află mai multe: https://reactjs.org/link/switch-to-createroot

Cum pot să-l repar?

Am creat aplicația mea React folosind:

npx create-react-app my-app

Răspuns #1

În fișierul tău index.js, schimbă în:

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

Pentru TypeScript

Credit din secțiunea de comentarii de mai jos a răspunsului: 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();

Răspunsul #2

React 18 a fost lansat pe 29 martie 2022. ReactDOM.render a fost depreciat în React 18 și în prezent generează un avertisment și rulează într-un mod compatibil.

Deprecări

Deprecări

• react-dom: ReactDOM.render a fost învechit. Utilizarea acestuia va genera un avertisment și va rula aplicația ta în modul React 17. :
• react-dom: ReactDOM.hydrate a fost învechit. Utilizarea acestuia va afișa un avertisment și va rula aplicația ta în modul React 17.
• react-dom: ReactDOM.unmountComponentAtNode a fost învechit.
• react-dom: ReactDOM.renderSubtreeIntoContainer a fost învechit.
• react-dom/server: ReactDOMServer.renderToNodeStream a fost depreciat.

Pentru a rezolva problema, poți fie să revii la o versiune anterioară de React, fie să îți actualizezi fișierul index.js pentru a fi compatibil cu sintaxa React 18.

Exemplu :

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

Răspunsul #3

În loc de:

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

Folosește :

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

Mai multe detalii aici

Răspuns #4

Înainte

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

După

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

Înainte, în fișierul tău 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();

Schimbă-l ca mai jos în fișierul tău 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();

Răspunsul #5

API-ul rădăcină vechi cu ReactDOM.render a fost depreciat în React 18 și a fost înlocuit cu un API nou de rădăcină folosind createRoot. Rădăcina aplicației tale este elementul DOM de nivel superior care conține toate componentele tale renderizate și este de obicei un <div> cu un ID de root.

React 18 încă are suport pentru ReactDOM.render, așa că tehnic nu ești obligat să faci actualizarea, dar nu poți fi sigur cât va dura acest suport.

Poți găsi mult mai multe informații despre diferența dintre ReactDOM.render și createRoot la https://thelonecoder.dev/javascript/react-js/reactdom-render-vs-createroot/.

Pentru a actualiza la noul API root, modificați fișierul index.js la ceva asemănător cu următorul:

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

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