Vanilla 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文件中以包含其他子組件。

Vanilla React有辦法實現這一目標嗎？

例如：

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

Answer 1

組件只是對象/函數，因此您可以將它們放在某個共享的命名空間中。

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

然后在其他文件中：

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

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