React 的 createRoot 函数的问题

Question

我在项目中遇到了 React 的 createRoot 函数的问题。当我尝试使用

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

时，我在控制台中收到以下错误：未捕获错误：createRoot(...): 目标容器不是 DOM 元素。

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.jsx';
import './index.css';

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

我已验证 id="root" 的元素存在于我的 HTML 文件中。

Answer 1

您只需尝试使用以下格式即可，

import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App.jsx';
import './index.css';    
    
const domNode = document.getElementById('root');
const root = createRoot(domNode);
    
root.render(
    <React.StrictMode>
       <App />
    </React.StrictMode>
);

参考此文档链接：createRoot

补充一点：ReactDOM.render 在 ReactJS v18.0.0 中已被弃用（已删除：ReactDOM.render）