如何保留页面原有HTML结构并注入使用React组件

核心思路 #

React支持独立挂载到页面上任意指定的DOM节点，只会操作该节点内部的内容，不会影响节点外的所有原有DOM结构，完全满足保留原有80%静态HTML、不影响非技术人员维护的需求。

实现步骤 #

• 第一步：原有HTML内容完全保留，仅在需要插入React组件的位置，新增一个空的DOM容器（建议用div标签），给容器设置唯一的id属性即可，原有内容的维护人员不需要改动任何其他代码，也不需要了解React相关知识。
• 第二步：引入React运行时依赖，你可以选择两种开发模式：
  • 轻量化模式：直接在HTML底部引入React、ReactDOM的UMD版本资源，简单组件可以直接配合Babel的UMD版本做实时JSX编译，不需要搭建工程化环境。
  • 工程化模式：用Vite、Webpack等工具搭建正常的React开发环境，开发完成后将组件打包成独立的JS/CSS资源，再引入到原有HTML中。
• 第三步：编写React组件，调用React的挂载API将组件渲染到你之前新增的指定DOM容器中即可。

代码示例 #

原有HTML代码（仅做最小改动） #

<!-- 以下为原有80%的静态内容，维护人员可正常修改，完全不受React影响 -->
<header>网站原有头部</header>
<div class="main-content">
  <p>原有页面的所有文本、图片、样式都完全保留</p>
  <!-- 仅新增这一行作为React组件的挂载容器 -->
  <div id="react-comment-box" data-post-id="123"></div>
  <p>其他原有内容继续正常维护即可</p>
</div>
<footer>网站原有底部</footer>

<!-- 引入React相关依赖，放在页面底部不阻塞原有内容渲染 -->
<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<!-- 引入你开发完成的React组件打包资源 -->
<script src="/static/react-components.js"></script>

React组件代码（React 18版本） #

// 正常编写React组件，可读取挂载容器上的自定义参数和原有页面数据
const CommentBox = () => {
  const mountNode = document.getElementById('react-comment-box')
  // 获取原有页面传入的参数，维护人员可以直接修改容器的data属性来传值
  const postId = mountNode.dataset.postId
  return (
    <div className="comment-box">
      <h3>评论区（React实现）</h3>
      {/* 组件功能逻辑正常开发即可 */}
    </div>
  )
}

// 将组件挂载到指定容器，仅操作该容器内部内容，完全不影响外部原有DOM
const root = ReactDOM.createRoot(document.getElementById('react-comment-box'))
root.render(<CommentBox />)

注意事项 #

• 样式隔离：如果担心React组件的样式和原有页面样式冲突，可以使用CSS Modules、组件样式加统一前缀，或者挂载到Shadow DOM中实现完全隔离。
• 多组件扩展：如果需要插入多个React组件，只需要在对应位置新增多个不同id的挂载容器，分别挂载不同组件即可，互不影响。
• 数据交互：如果需要原有页面和React组件交互，可以通过挂载节点的data属性、全局变量、自定义事件的方式传递数据，不需要改动原有页面的核心逻辑。

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