同构反应，意外令牌
[英]Isomorphic react, unexpected token <
问题描述
我将应用程序重建为同构方法。 在我的本地环境上一切正常（节点版本本地和在线相同），但是不幸的是，将文件上传到我的网络服务器后，我收到以下错误消息：
SyntaxError: .../index.js: Unexpected token (74:62)
72 | friends: friends
73 | }
> 74 | var reactString = ReactDOM.renderToString(<IndexApp {...props}/>)
^
这直接指向<IndexApp..中的<IndexApp..
我的需求列表如下：
var React = require('react')
var ReactDOM = require('react-dom/server')
var IndexApp = require('../public/js/build/components/IndexApp').default
var PostApp = require('../public/js/build/components/PostApp').default
我找不到任何适当的解决方案。 我很高兴得到任何提示。 谢谢。
3 个解决方案
解决方案1
2 2016-06-05 18:04:52
您需要将jsx转换为javascript。 您可以使用Babel来完成此操作，例如
babel my-file.js --presets react -o output.js
解决方案2
2 2016-06-05 18:26:28
这里有两个选择：1）对于开发环境，您可以像这样包装jsx代码
<script type="text/babel" src="yourfile"/>
并包括browser.min.js它将在您的浏览器中转译。
2）对于产品环境，您需要先进行翻译。您可以使用babel在本地计算机上进行翻译
babel --presets es2015,react --minified financialFeed.js -o ./compiled/compiled.js
或者您可以通过以下方式在线进行操作：
https://babeljs.io/repl/
解决方案3
0 已采纳 2016-06-05 18:09:19
为了使带有JSX的Javascript在浏览器中运行，必须首先对其进行编译。 您可以在页面中通过添加Babel并将脚本类型更改为'text / babel'来实现。 首先，将其放在页面的<head>中：
<script
src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
然后像这样包装您的包含jsx的Javascript：
<script type="text/babel">
... code goes here ...
</script>
反应意外令牌：运算符（<）
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.