我刚刚开始玩弄 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:如果它非常微不足道，希望我不要出洋相!
最佳答案
首先，确保您使用的是某些 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>
);
关于javascript - ReactJS 抛出语法错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38081990/