ReactJS 抛出语法错误
Posted
技术标签:
【中文标题】ReactJS 抛出语法错误【英文标题】：ReactJS throwing syntax error 【发布时间】：2016-10-31 02:55:57 【问题描述】：我刚刚开始玩弄 reactjs。
var ProduktRow = React.createClass(
render:function()
return (
<input type="text" value = this.props.prod.artnr />
<input type="text" value = this.props.prod.prz />
);
);
var ProduktTable = React.createClass(
render:function()
var rows = [];
this.props.produkt.forEach(
function(prod)
rows.push(<ProduktRow prod = prod key=prod.artnr />);
.bind(this)
);
return(rows);
);
var PRODUKT = [
artnr: "123", prz:"hallo1",
artnr: "456", prz:"hallo2",
artnr: "789", prz:"hallo3",
];
ReactDOM.render(
<ProduktTable produkt=PRODUKT />,
document.getElementById('container')
);
似乎总是在扔一个
produkt.js:4 Uncaught SyntaxError: Unexpected token
我使用 flask 提供这个服务。主要的 html 文件是：
% extends "header_footer.html" %
% block title %PRODUKT% endblock %
% block head %
super()
% endblock %
% block content %
<div class = "container" id ="container"></div>
<script src="url_for('static', filename='js/produkt.js') "></script>
% endblock %
头文件如下所示：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href=" url_for('static', filename='css/header_footer.css') ">
% block head %<title>% block title %% endblock %</title>% endblock %
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-with-addons.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
<!-- jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script> window.jQuery || document.write('<script src="url_for('static', filename='js/jquery-2.2.2.min.js') ">\x3C/script>') </script>
<script type=text/javascript>
$SCRIPT_ROOT = request.script_root|tojson|safe ;
</script>
</head>
<body>
<section>% block content %% endblock %</section>
</body>
<!-- Bootstrap -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</html>
谁能帮我弄清楚为什么会出现这个错误？
P.S：希望我不要自欺欺人，如果它非常微不足道！
【问题讨论】：
【参考方案1】：首先，确保您使用的是一些 JSX 编译器。
相邻的 JSX 元素必须包含在封闭标记中。考虑：
return (
<input type="text" value=this.props.prod.artnr />
<input type="text" value=this.props.prod.prz />
);
所以你可以添加一个“外部”，如：
return (
<div>
<input type="text" value=this.props.prod.artnr />
<input type="text" value=this.props.prod.prz />
</div>
);
【讨论】：
nope.. 仍然给我同样的错误，但在div 行
你正在使用一些 JSX 转换器/转译器/编译器？【参考方案2】：
您可能没有将 jsx 代码编译为有效的 js。
您应该使用babel 和babel-preset-react npm 包以及webpack 来转译jsx。
欲了解更多信息，请阅读详细方法：https://www.twilio.com/blog/2015/08/setting-up-react-for-es6-with-webpack-and-babel-2.html
【讨论】：
我将脚本类型添加为text/babel，但语法错误没有出现，而是另一个.. react.js:19106 Uncaught Invariant Violation: ProduktTable.render(): A valid React必须返回元素（或 null）。您可能返回了未定义、数组或其他一些无效对象
是的，它成功了。在返回任何东西之前需要添加一个封闭的 html 标记。想知道为什么！以上是关于ReactJS 抛出语法错误的主要内容，如果未能解决你的问题，请参考以下文章
导入 ReactJS 时出现“未捕获的语法错误：无法在模块外使用 import 语句”