如何在不同的＆＃34; <script>标签中调用React类？

Question

环境

＆＃xA;＆＃xA;

＆＃xA;
• HTML生成器： Pug（Jade）
＆＃xA;
• ES6 transpiler： Babel
＆＃xA;

＆＃xA;＆＃xA;

---

＆＃xA;＆＃xA;

说明

＆＃xA;＆＃xA;

componentA.jsx 中有一个名为 componentA 的组件。在这个脚本中，它将在同一时间呈现。

＆＃xA;＆＃xA;

在 componentA.jsx ：

＆＃xA;＆＃xA ;

 让ComponentA = React.createClass（{＆＃xA; render：function（）{...}＆＃xA;}）;＆＃xA;＆＃xA; ReactDOM.render（＆＃ xA;＆lt; ComponentA /＆gt;，＆＃xA; document.getElementById（'container'）＆＃xA;）;＆＃xA;  

＆＃xA;＆＃xA;

在 index.pug ：

＆＃xA;＆＃xA;

  extends ./template.pug

block content＆＃xA; DIV＃容器＆＃XA;＆＃XA;脚本（类型= '文本/巴别'）＆＃XA;包括./components/building.jsx

---

目标/目标

＆＃ xA;＆＃xA;

删除 componentA.jsx 中的 ReactDOM.render 。然后我可以在其他＆lt; script＆gt;中使用 ComponentA 。标记，如下面的代码。我想将渲染的动作移动到其他位置。

＆＃xA;＆＃xA;

在新的 componentA.jsx ：

＆＃xA;＆ #xA;

 让ComponentA = React.createClass（{＆＃xA; render：function（）{...}＆＃xA;}）;＆＃xA;  

＆＃xA;＆＃xA;

在新的 index.pug 中：

＆＃xA;＆＃xA;

  extends ./template.pug&# xA;＆＃xA;阻止内容＆＃xA; DIV＃容器＆＃XA;＆＃XA;脚本（类型= '文本/巴别'）＆＃XA;包括./components/building.jsx

 。脚本（类型= '文本/巴别'）＆＃XA; ReactDOM.render（＆＃xA;＆lt; ComponentA /＆gt;，＆＃xA; document.getElementById（'container'）＆＃xA;）;＆＃xA;  

＆＃xA;＆ #xA;

---

＆＃xA;＆＃xA;

问题

＆＃xA;＆＃xA;

将在浏览器中收到错误消息。

＆＃xA;＆ #xA;

ReferenceError：未定义ComponentA

＆＃xA;