React中已从react-dom/client导入createRoot仍出现警告的问题

你代码里的问题很明确：

• 你虽然从react-dom/client导入了createRoot，但实际创建根节点时用的是ReactDOM.createRoot(app)——这个createRoot来自你导入的整个react-dom包，不是react-dom/client里的新版本方法。
• react-dom包本身的createRoot已经被废弃，所以浏览器会抛出警告提示你改用react-dom/client的版本。

修正后的代码 #

import React from 'react';
// 删掉这行不必要的导入，避免混淆
// import * as ReactDOM from 'react-dom';
import {createRoot} from 'react-dom/client';

export default function TodoList() {
    return(
    <>
    <h1>Lets do stuff!</h1>
    </>
    )
}

const app = document.getElementById('app');
// 直接使用从react-dom/client导入的createRoot
const root = createRoot(app);
// 别忘了调用render渲染组件，原代码漏掉了这一步
root.render(<TodoList />);

关键修正点 #

• 移除import * as ReactDOM from 'react-dom';，因为你不需要再用旧版的react-dom方法
• 直接使用导入的createRoot创建根节点，而不是通过ReactDOM调用
• 补充root.render(<TodoList />)，否则你的组件不会被渲染到页面中

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