如何解决React项目中ReactDOM.render不再支持的警告错误？

第一步：正确修改入口文件代码 #

你的当前代码仍在使用旧的ReactDOM.render API，需按照React 18规范替换为createRoot，修改后的完整代码如下：

import React from 'react';
// 从react-dom/client导入createRoot
import { createRoot } from 'react-dom/client';

//CSS
import './index.css';

function BookList() {
    return (
        <section className="booklist">
            <Book />
            <Book />
            <Book />
            <Book />
            <Book />
            <Book />
            <Book />
            <Book />
            <Book />
        </section>
    );
}

const Book = () => {
    return (
        <article className="book">
            <Image />
            <Title />
            <Author />
        </article>
    );
};

const Image = () => (
    <img
        src="https://m.media-amazon.com/images/I/917y6YbgeDL._AC_UY218_.jpg"
        alt="The Bostonians book cover"
    />
);

const Title = () => <h1>The Bostonians</h1>;
const Author = () => (
    <h4 style={{ color: '#617d98', fontSize: '0.75rem', marginTop: '0.25rem' }}>
        Henry James
    </h4>
);

// 获取根元素并创建根实例
const rootElement = document.getElementById('root');
const root = createRoot(rootElement);
// 渲染组件
root.render(<BookList />);

第二步：排查警告未消失的可能原因 #

若修改后警告仍存在，检查以下几点：

• 确认项目所有入口文件都替换了ReactDOM.render，比如是否有SSR入口、微应用子入口等未更新
• 验证React和ReactDOM版本是否为18.x：在项目根目录执行npm list react react-dom查看版本，若低于18，执行npm install react@latest react-dom@latest升级
• 清除缓存：删除node_modules和package-lock.json后，执行npm install重新安装依赖
• 检查第三方库：部分旧库内部可能仍在使用ReactDOM.render，可暂时忽略警告，等待库版本更新

内容的提问来源于stack exchange，提问作者Eudeamonism