ReactJS 抛出语法错误答案

【问题标题】：ReactJS throwing syntax errorReactJS 抛出语法错误
【发布时间】：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：希望我不要自欺欺人，如果它非常微不足道！

【问题讨论】：

标签： javascript html reactjs flask syntax-error

【解决方案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 标记。想知道为什么！