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

Moving react into seperate component files without Node

本文关键字：单独 组件 文件 Node 移动      更新时间：2023-09-26

我没有使用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>

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

举个例子：

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

或者更简洁地说：

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

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

通过这种方式，您将能够使用 es2015 import 语法将组件从一个文件导入到另一个文件，将所有内容捆绑在一个文件中，以及更多额外的好处，如代码缩小、源映射、实时加载等。

使用 Webpack 和 Babel 为 ES6 设置 React

使用 React with Webpack 教程

相关问题

相关文章：