Javascript 使用jinja为多个页面绑定jsx文件

我正在使用React，并试图了解将多个页面的文件捆绑到单个js文件（基本jinja模板中的js文件脚本）的最佳方式

捆绑包的一切都很好，但我正在尝试了解如何处理应用程序入口点文件的单独页面

示例条目文件：

var React = require('react');
var Test = require('./test.jsx'); 
React.render(React.createElement(test.foo), document.getElementById('foo'));
React.render(React.createElement(test.bar), document.getElementById('bar'));
React.render(React.createElement(test.another), document.getElementById('another'));

假设一个部分模板使用foo和bar，另一个页面使用另一个。 如果我遵循此模式，我将得到以下控制台错误：

Uncaught Error: Invariant Violation: _registerComponent(...): Target container is not a DOM element.

---

因为模板不包含app.js条目脚本中呈现给应用程序的所有元素。在多个页面上使用脚本而不接收类似错误的正确方法是什么？最好的方法是什么？谢谢。

看起来document.getElementById返回空值，所以使用if语句？如果您还没有这样做，也许您应该查看一下Webpack？您找到解决方案了吗？