Question

我没有使用Node，如何将我当前在text / babel脚本标签中的反应代码（jsx）移动到单独的组件文件中？我已经尝试移动它们然后在html文件中引用它们但是只要它碰到HTML的第一位就会引发语法错误，我已经尝试了文件的.jsx和.js扩展名，当我包含它时我给出了它是文本/ babel的脚本类型。

<script src="components/nav.jsx" type="text/babel" ></script>
<script src="components/map.jsx" type="text/babel" ></script>
<script src="components/app.jsx" type="text/babel" ></script>

Answer 1

如果要在浏览器中转换JSX，则必须将每个组件附加到窗口对象。

举个例子：

var Nav = React.createClass({ ... });
window.Nav = Nav;

或更简洁：

window.Nav = React.createClass({ ... });

Answer 2

Jim Nielsen是正确的，但是将部分代码暴露给全局范围并在浏览器中转换JSX被认为是一种不好的做法。相反，您应该考虑使用一些建筑系统，如Webpack。

通过这种方式，您可以使用es2015 import syntax将组件从一个文件导入另一个文件，将所有内容捆绑到一个文件中，还可以获得更多其他好处，如代码缩小，源映射，实时重载等。

Setting up React for ES6 with Webpack and Babel

Using React with Webpack Tutorial

Related issue

将反应移动到没有Node的单独组件文件中

2 个答案: