使用jQuery load方法在div中渲染多组件时部分组件无法渲染

开发者阿泽

2026-8-29

问题原因

jQuery的.load()方法原生特性：当传入的选择器匹配到多个DOM元素时，仅会对匹配集合的第一个元素执行内容加载，其余匹配元素直接被忽略，这是多个同名class的div无法完成渲染的直接原因。
现有代码将$(document).ready()写在renderComponent函数内部，多次调用函数会重复注册DOM就绪事件回调，当渲染目标数量超过2个时，回调执行时序会出现混乱。
加载的React组件默认会全局查找第一个匹配的挂载节点，若未手动绑定当前加载对应的容器为挂载点，后执行的加载逻辑会覆盖已生成的组件实例；渲染目标越多，挂载冲突概率越高，这就是新增第三个待渲染div后渲染失败的核心原因。

现象对应逻辑

仅使用1个带id的div（选择器匹配唯一元素）+1个带class的div（选择器匹配唯一元素）时，总计2个渲染目标，.load()无需处理多元素场景，组件脚本冲突概率极低，因此表现为渲染正常。
新增第三个渲染目标后，要么触发.load()仅对第一个匹配元素生效的限制，要么出现React组件多实例挂载的全局冲突，直接导致渲染失败。

修复方案

将DOM就绪监听移至外层，遍历所有匹配元素逐个加载，同时给每个容器指定独立挂载点，修正后完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
  <title>React App</title>
</head>
<body>
  <div class="team-container"></div>
  <div id="a"></div>
  <div id="b"></div>
  <div id="c"></div> 
  <div id="d" class="team"></div>

<script>
// 仅绑定一次DOM就绪事件，避免重复注册导致的时序混乱
$(document).ready(function () {
  function renderComponent(selector){
    // 遍历所有匹配到的容器元素，逐个执行加载
    $(selector).each(function(){
      const $currentContainer = $(this);
      // 给当前容器加唯一标识，避免挂载冲突
      const containerUid = 'render-' + Math.random().toString(36).slice(2, 10);
      $currentContainer.attr('data-uid', containerUid);

      $currentContainer.load("private component url link", function(){
        // 加载完成后手动将组件挂载到当前容器，跳过全局查找挂载点的逻辑
        if (window.React && window.TargetComponent) {
          ReactDOM.render(
            React.createElement(window.TargetComponent),
            $currentContainer[0]
          );
        }
      });
    });
  }

  // 按需调用渲染，支持多同class容器、多id容器同时渲染
  renderComponent("#d")
  renderComponent(".team-container")
  // 新增渲染目标直接调用即可，不会出现冲突
  // renderComponent("#a")
  // renderComponent("#b")
});
</script>  
</body>
</html>

核心修复点：

移除函数内部重复的$(document).ready()绑定，仅在全局初始化时绑定一次，保证回调执行时序稳定
通过.each()遍历选择器匹配的所有元素，逐个执行加载逻辑，解决同名class多元素仅第一个渲染的问题
每个容器加载完成后手动指定自身为React挂载点，避免组件全局查找挂载点导致的实例覆盖问题
若加载的组件自带独立初始化脚本，需修改组件逻辑，将传入的容器节点作为挂载根，不要用全局固定选择器查找挂载点

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