ReactJS wirft Syntaxfehler

Ich habe gerade angefangen, mit reactjs herumzuspielen.ReactJS wirft Syntaxfehler

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

scheint immer sein, um einen

produkt.js:4 Uncaught SyntaxError: Unexpected token <

warf ich diene dies mit Kolben. Die Haupt-HTML-Datei ist:

{% 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 %}

Die Header-Datei wie folgt aussieht:

<!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>

Könnte jemand bitte helfen Sie mir herauszufinden, warum dieser Fehler auftritt?

P.S: Hoffe ich mache mich nicht zum Narren, wenn es sehr trivial ist!

Quelle

2016-06-28 Mellkor

Stellen Sie zunächst sicher, dass Sie einen JSX-Compiler verwenden.

Benachbarte JSX-Elemente müssen in ein umschließendes Tag eingeschlossen werden. In Anbetracht:

return (
    <div> 
    <input type="text" value={this.props.prod.artnr} /> 
    <input type="text" value={this.props.prod.prz} /> 
    </div> 
);

Quelle

2016-06-28 16:55:23

nee .. noch gibt mir die gleichen Fehler, aber auf der 'div' Linie – Mellkor

Sie sind einige JSX Transformator/Transpiler/Compiler? –

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

Mögliche Sie kompilieren nicht Ihre jsx Code gültig js:

return (
    <input type="text" value={this.props.prod.artnr} /> 
    <input type="text" value={this.props.prod.prz} /> 
);

Sie könnten eine "äußere" wie so hinzuzufügen.

Sie sollten babel und babel-preset-react npm-Paket zusammen mit webpack zum Transpilieren von jsx verwenden.

Für weitere Informationen, lesen Sie ausführliche Anleitung:
https://www.twilio.com/blog/2015/08/setting-up-react-for-es6-with-webpack-and-babel-2.html

Quelle

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

Ich habe Skripttyp als 'text/babel' hinzugefügt und der Syntaxfehler wird nicht angezeigt, aber ein anderer .. __react.js: 19106 Ungefasste invariante Verletzung: ProduktTable.render(): Ein gültiges React-Element (oder null) muss zurückgegeben werden. Sie haben möglicherweise undefined, ein Array oder ein anderes ungültiges Objekt zurückgegeben. – Mellkor

Yup hat es funktioniert. Müssen Sie ein einschließendes HTML-Tag hinzufügen, bevor Sie etwas zurückgeben. Wunder warum! – Mellkor

ReactJS wirft Syntaxfehler

Antwort

Verwandte Themen