Question

我刚刚开始使用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：意外的标记＆lt;

我使用 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：希望如果它非常微不足道，我就不会愚弄自己！

Answer 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>
);

Answer 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

ReactJS抛出语法错误

2 个答案: