ReactJS拋出語法錯誤
[英]ReactJS throwing syntax error
問題描述
我剛剛開始使用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：意外的令牌<
我用燒瓶服用 。 主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>
有人可以幫我弄清楚這個錯誤發生的原因嗎？
PS：希望如果它非常微不足道，我不會自欺欺人！
2 個解決方案
解決方案1
2 2016-06-28 16:55:23
首先，確保您使用的是某些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>
);
解決方案2
1 2016-06-28 17:12:12
您可能沒有將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
ReactJS 中的語法錯誤
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.