将节点移动到单独的组件文件中没有节点

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

<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>

来源

2016-02-29 Jacob Mason

能否请您粘贴错误信息？顺便说一句我建议使用webpack而不是使用'text/babel'脚本标签 – TIJ

@TIJ如果我把它放在一个单独的文件中，它可以正常工作。但是，如果我分割它，然后引用它们，我会得到'Navbar未定义'。我将更新与我如何参考文件的帖子。 –

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

举个例子：

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

或者更简洁：

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

来源

2016-03-14 15:48:35

这在技术*作品*然而被认为是不好的实践。请参阅[Dmitriy的更多答案]（https://stackoverflow.com/a/37764638/1339693） –

Jim Nielsen是正确的，但它被认为是一个不好的做法，暴露你的部分代码到全球范围，在浏览器中传输JSX。相反，你应该考虑使用一些建筑系统，如Webpack。

这种方式，您将能够使用es2015 import syntax进口部件从一个文件到另一个，在一个文件中捆绑一切，很像缩小的代码，sourcemaps，livereload等多个额外的好处

Setting up React for ES6 with Webpack and Babel

Using React with Webpack Tutorial

Related issue

来源

2016-06-11 14:04:13

将节点移动到单独的组件文件中没有节点

回答

相关问题