javascript - แจ้งเตือนการเลิกใช้: ReactDOM.render ไม่ได้รับการสนับสนุนอีกต่อไปใน React 18

ฉันได้รับข้อผิดพลาดนี้ทุกครั้งที่ฉันสร้างแอป React ใหม่:

คำเตือน: ReactDOM.render ไม่ได้รับการสนับสนุนใน React 18 อีกต่อไป ใช้ createRoot แทน จนกว่าคุณจะเปลี่ยนไปใช้ API ใหม่ แอปของคุณจะทำงานเหมือนกับว่ากำลังใช้ React 17 เรียนรู้เพิ่มเติม: https://reactjs.org/link/switch-to-createroot

ฉันจะแก้มันได้อย่างไร?

ฉันสร้างแอป React ของฉันโดยใช้:

npx create-react-app my-app

คำตอบ #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();

สำหรับ TypeScript

เครดิตจากส่วนความคิดเห็นด้านล่างคำตอบ: 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();

คำตอบ #2

React 18 ออกวางจำหน่ายเมื่อวันที่ 29 มีนาคม 2022 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>
);

คำตอบ #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>)

รายละเอียดเพิ่มเติมที่นี่

คำตอบ #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();

คำตอบ #5

API รากแบบเดิมที่ใช้ ReactDOM.render ถูกยกเลิกใน React 18 และถูกแทนที่ด้วย API รากใหม่ที่ใช้ createRoot รากของแอปของคุณคือองค์ประกอบ DOM ระดับบนสุดที่บรรจุทุกคอมโพเนนต์ที่คุณเรนเดอร์ และมักจะเป็น <div> ที่มี ID เป็น root

React 18 ยังคงมีการสนับสนุน ReactDOM.render ดังนั้นทางเทคนิคคุณจึงไม่จำเป็นต้องอัปเดต แต่คุณไม่สามารถมั่นใจได้ว่าการสนับสนุนนี้จะอยู่ได้นานแค่ไหน

คุณสามารถหาข้อมูลเพิ่มเติมเกี่ยวกับความแตกต่างระหว่าง ReactDOM.render และ createRoot ได้ที่ https://thelonecoder.dev/javascript/react-js/reactdom-render-vs-createroot/

ในการอัปเดตไปยัง root API ใหม่ ให้เปลี่ยนไฟล์ index.js ของคุณเป็นบางอย่างดังต่อไปนี้:

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

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