ReactJS投掷语法错误

我刚刚开始玩转reactjs。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 <

我该使用烧瓶服务。主要的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：希望如果它非常微不足道，我就不会让自己变傻！

来源

2016-06-28 Mellkor

首先，确保您使用的是一些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> 
);

来源

2016-06-28 16:55:23

没了..还是给了我同样的错误，但是，'div'线 – Mellkor

您使用的是一些JSX变压器/ transpiler /编译器？ –

https://facebook.github.io/react/docs/jsx-in-depth.html –

可能你没有编译你的JSX代码为有效的JS。

您应该使用babel和babel-preset-react npm包以及webpack来传输jsx。

欲了解更多信息，请阅读详细的HOWTO：
https://www.twilio.com/blog/2015/08/setting-up-react-for-es6-with-webpack-and-babel-2.html

来源

2016-06-28 17:12:12 1ven

我将脚本类型添加为“text/babel”，并且语法错误不显示，但是另一个.. __react.js： 19106 Uncaught不变违规：ProduktTable.render（）：必须返回有效的React元素（或null）。你可能已经返回undefined，一个数组或其他一些无效的对象_ – Mellkor

是的，它工作。在返回任何东西之前需要添加一个封闭的html标签..不知道为什么！ – Mellkor

ReactJS投掷语法错误

回答

相关问题