香草ReactJS包含JSX文件中的子组件

Question

早上好。我试图使用vanilla React（不使用NodeJS）将一些组件添加到我们现有的站点。

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react-dom.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script> 
<script type="text/babel" src="./js/React/src/Contact_Form.jsx"></script> 

使用NodeJS以前我正在使用例如。 var Button = require("./button");在我的.jsx文件中包含其他子组件。

有没有一种方法与香草React做到这一点？

例如：

的index.html - > form.jsx - >（input.jsx，select.jsx，button.jsx）

Answer 1

组件只是对象/功能，所以你可以把它们放在一些共享的命名空间。

var Button = window.ReactComponents 
    ? window.ReactComponents.Button 
    : <span /> 

var CoolButton = props => <Button style={{ color: 'blue' }} /> 

：

window.ReactComponents = window.ReactComponents || {} 
window.ReactComponents.Button = props => <button /> 

在其他一些文件

然后