如何将普通JS数据传入text/babel文件并按需执行React组件

AI 小北

2026-7-24

解决方案

1. 将selectorUrl暴露到全局作用域

在HTML文件中，把Jinja模板生成的selectorUrl挂载到window全局对象上，让custom.js和app.js都能访问到：

<!-- 你的HTML文件 -->
<script>
  // 从Jinja模板注入selectorUrl到全局
  window.selectorUrl = "{{ selectorUrl }}";
</script>
<!-- 按顺序加载脚本：先custom.js，后app.js -->
<script src="/path/to/custom.js"></script>
<script type="text/babel" src="/path/to/app.js"></script>

2. 修改app.js，延迟React组件渲染

不在app.js初始化时直接渲染组件，改为等待selectorUrl可用后再执行，提供两种实现方式：

方式一：直接检查全局变量（简单场景）

// app.js
function renderTable(url) {
  ReactDOM.render(
    <TableComponent selectorUrl={url} />,
    document.getElementById('root')
  );
}

// 若全局变量已存在则直接渲染，否则轮询等待
if (window.selectorUrl) {
  renderTable(window.selectorUrl);
} else {
  const checkInterval = setInterval(() => {
    if (window.selectorUrl) {
      clearInterval(checkInterval);
      renderTable(window.selectorUrl);
    }
  }, 100);
}

方式二：自定义事件解耦（推荐，更优雅）

如果custom.js需要对selectorUrl做异步处理，用自定义事件可以避免轮询：

在custom.js中触发事件

// custom.js
// 假设这里对selectorUrl做了异步处理
const processedUrl = window.selectorUrl;
// 处理完成后触发自定义事件
window.dispatchEvent(new CustomEvent('selectorUrlReady', { detail: processedUrl }));

在app.js中监听事件

// app.js
function renderTable(url) {
  ReactDOM.render(
    <TableComponent selectorUrl={url} />,
    document.getElementById('root')
  );
}

// 监听自定义事件，收到后渲染组件
window.addEventListener('selectorUrlReady', (e) => {
  renderTable(e.detail);
});

// 兼容事件已提前触发的情况
if (window.selectorUrl) {
  renderTable(window.selectorUrl);
}