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，例如。我的.jsx文件中的var Button = require("./button");包含其他子组件。

有没有办法用香草React来实现这个目标？

例如：

index.html - ＆gt; form.jsx - ＆gt; （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' }} />

Vanilla ReactJS包含JSX文件中的子组件

1 个答案: