React中如何将组件追加挂载到指定id的div容器中

该需求完全可以在React中实现。你之前第三步挂载失败的核心原因是：JSX编写的SmartTable是React元素而非真实DOM节点，无法直接通过原生DOM的appendChild等方法插入页面，必须遵循React的渲染规则操作。

你已经完成了表格数据提取、替换带唯一ID的占位div的逻辑，不需要重构已有代码，只需要调整第三步的挂载逻辑即可：

• 引入React提供的DOM挂载方法，在解析内容渲染完成后执行挂载
• 注意不要用原生DOM方法直接插入React组件，必须通过React的渲染入口挂载

import { useEffect } from 'react';
// React 18 用下面的引入
import { createRoot } from 'react-dom/client';
// React 17及更早版本替换为：import ReactDOM from 'react-dom';
import SmartTable from './SmartTable';

// 你前两步提取好的表格列表，格式示例：[{ id: 'table-唯一标识', data: 提取到的表格结构化数据 }]
const extractedTableList = 你前两步存储表格数据的变量;

export default function HtmlRender({ rawHtml }) {
  // 这里是你已经写完的前两步解析逻辑，最终得到解析后的React节点
  const parsedContent = 你已有的html解析+替换占位div的逻辑(rawHtml);

  useEffect(() => {
    // 等占位div真实渲染到页面后再执行挂载
    extractedTableList.forEach(tableItem => {
      const container = document.getElementById(tableItem.id);
      if (!container) return;
      // 清空容器避免重复渲染
      container.innerHTML = '';
      
      // React 18 挂载逻辑
      const root = createRoot(container);
      root.render(<SmartTable tableData={tableItem.data} />);

      // React 17及更早版本用下面的挂载逻辑替换上面两行
      // ReactDOM.render(<SmartTable tableData={tableItem.data} />, container);
    });

    // 组件卸载时清理挂载的组件，避免内存泄漏
    return () => {
      extractedTableList.forEach(tableItem => {
        const container = document.getElementById(tableItem.id);
        if (!container) return;
        // React 18 可以直接清空容器，复杂场景建议缓存root实例调用unmount
        container.innerHTML = '';
        // React 17及更早版本用下面的清理逻辑
        // ReactDOM.unmountComponentAtNode(container);
      })
    }
  }, [parsedContent])

  return <div className="html-wrapper">{parsedContent}</div>
}

注意：这种命令式挂载的组件脱离React主渲染树，如果你的SmartTable依赖全局上下文（比如主题、路由、状态管理），需要在render时把对应Provider包在组件外层，否则无法获取上下文值。

其实你不需要设计占位+事后挂载的流程，html-react-parser本身提供了节点替换配置，可以在解析阶段直接把table标签替换为自定义组件，减少冗余DOM操作，也不会遇到挂载、上下文丢失的问题：

import parse from 'html-react-parser';
import SmartTable from './SmartTable';

export default function HtmlRender({ rawHtml }) {
  const parsedContent = parse(rawHtml, {
    replace(domNode) {
      // 匹配到table标签时直接返回自定义组件
      if (domNode.name === 'table') {
        // 直接复用你已经写好的表格数据提取逻辑，从当前domNode中提取需要的结构化数据
        const tableData = 你已写好的表格数据提取逻辑(domNode);
        return <SmartTable tableData={tableData} />;
      }
    }
  })

  return <div className="html-wrapper">{parsedContent}</div>
}

这种写法所有组件都在React的统一渲染管控下，会自动跟随父组件重渲染、正常访问所有全局上下文，也不需要手动处理挂载卸载逻辑，是更推荐的实现方式。

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