在Django模板中渲染React组件并移除多余div（React 18适配）

核心思路是用React 18的createRoot替代旧版ReactDOM.render，结合Portal和DOM替换逻辑，实现无冗余容器的渲染效果：

// 定位到Django模板里的自定义标签
const targetElement = document.querySelector('HelloWorld');
// 从自定义标签属性中提取组件需要的props（示例逻辑，可根据实际调整）
const componentProps = {
  title: targetElement.getAttribute('title'),
  content: targetElement.getAttribute('content')
};

// 创建React 18的根实例
const root = ReactDOM.createRoot(targetElement);
// 通过Portal将组件渲染到目标标签内部
root.render(
  ReactDOM.createPortal(<HelloWorld {...componentProps} />, targetElement)
);

// 替换原自定义标签为组件实际渲染的DOM内容，移除多余包裹
targetElement.replaceWith(targetElement.firstChild);

关键细节说明 #

• React 18中ReactDOM.render已被废弃，必须使用createRoot创建根实例来管理组件渲染生命周期。
• Portal的作用是让组件内容直接挂载到目标自定义标签内，避免React默认添加的容器节点。
• 最后执行targetElement.replaceWith(targetElement.firstChild)，彻底把原<HelloWorld>标签替换成组件输出的DOM结构，保证DOM简洁性。

额外提示 #

• 如果有多个同类型自定义标签需要处理，可通过document.querySelectorAll('HelloWorld')遍历批量执行上述逻辑。
• 确保代码在DOM加载完成后执行（比如放在DOMContentLoaded事件回调中），避免出现找不到目标元素的情况。

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