React中创建div包裹已有content元素失败，求正确实现方法

原代码的问题 #

你之前的代码没生效的核心原因：

• React.createElement创建的是React虚拟DOM元素，不是浏览器能识别的真实DOM节点，没法直接影响页面结构
• 就算创建了虚拟元素，你也没有把它挂载到React渲染树或真实DOM中，更没有把.content元素移入其中

分场景解决方案 #

场景1：能直接控制组件的JSX结构（非第三方生成） #

这是React的最优写法，直接在JSX里给.content套一层div就行，完全不需要操作DOM：

return (
  <>
    <div className="heading"></div>
    {/* 自定义包裹div */}
    <div className="custom-content-wrapper">
      <div className="content"></div>
    </div>
    <div className="footer"></div>
  </>
);

场景2：只能操作第三方UI组件生成的DOM结构 #

如果是第三方组件生成的固定DOM，只能通过原生DOM操作兜底，修改后的代码如下：

useEffect(() => {
  const contentEl = document.querySelector('.content');
  if (!contentEl) return;

  // 创建真实的DOM包裹div
  const wrapperEl = document.createElement('div');
  wrapperEl.classList.add('custom-content-wrapper'); // 自定义类名

  // 把content元素移到包裹div里，同时保留原位置关系
  contentEl.parentNode.insertBefore(wrapperEl, contentEl);
  wrapperEl.appendChild(contentEl);

  // 组件卸载时恢复原结构，避免内存泄漏
  return () => {
    if (wrapperEl.parentNode) {
      wrapperEl.parentNode.insertBefore(contentEl, wrapperEl);
      wrapperEl.remove();
    }
  };
}, [dep]);

这段代码的逻辑：

1. 找到目标.content元素
2. 创建真实的包裹div节点
3. 把包裹div插入到.content的原位置前面
4. 将.content移入包裹div中
5. 添加清理函数，组件卸载时还原DOM结构，防止残留

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