React 18中如何使用createRoot渲染类组件？

核心原则 #

createRoot 相关代码绝对不能放在类组件内部（比如 state 里、类方法里），必须放在类定义的外部，且要确保执行代码时目标DOM元素已经存在。

正确步骤与示例 #

1. 确保页面中有目标DOM容器
   在HTML文件里先定义用来挂载组件的元素：

   <div id="myrenderelement"></div>
   

2. 在类组件外部编写渲染逻辑
   把创建root和渲染组件的代码放在类定义之后，或者包裹在DOM加载完成的回调里（避免DOM元素未加载导致的获取失败）：

   import React from 'react';
   import ReactDOM from 'react-dom/client';
   
   // 定义你的类组件
   class MyClassComponent extends React.Component {
     render() {
       return <h1>这是我的类组件</h1>;
     }
   }
   
   // 方式一：直接执行（需确保脚本在DOM元素之后加载，或给脚本加defer/async属性）
   const root = ReactDOM.createRoot(document.getElementById("myrenderelement"));
   root.render(<MyClassComponent />);
   
   // 方式二：等待DOM加载完成后执行（更稳妥）
   document.addEventListener('DOMContentLoaded', () => {
     const root = ReactDOM.createRoot(document.getElementById("myrenderelement"));
     root.render(<MyClassComponent />);
   });
   

之前错误的原因 #

• 放在类定义外报错：大概率是脚本执行时myrenderelement还没被浏览器解析，用DOMContentLoaded回调就能解决。
• 放在组件state里：完全不符合React语法，state是用来存储组件内部状态数据的，不能放DOM操作或渲染逻辑代码，必然触发语法错误。

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