香草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 /> 

在其他一些文件

然後