Reacjs bekomme die generische Fehlermeldung "Unerwartetes Token"

Ich bin neu bei Reactjs und erhalte den "unerwarteten Token-Fehler" bei meinem ersten Versuch, eine Reihe von Komponenten zu erstellen.Reacjs bekomme die generische Fehlermeldung "Unerwartetes Token"

Meine Konsole meldet dies:

SyntaxError: http://localhost:3004/app.js: Unexpected token (14:11) 

class AnnouncementList extends React.Component 
{ 
    render() { 
      ^
      return (

ich wirklich frustriert bekam, wenn die Konsolenausgabe auf Google-Suche es vermasselt wirklich, wenn wir Code in den Suchbegriffen einfügen. Ich habe das Babel-Plugin eingerichtet.

class AnnouncementsDashboard extends React.Component 
    { 
    render() { 
     return (
     <div> 
     <AnnouncementList/> 
     <div> 
    ); 
    } 
} 

    class AnnouncementList extends React.Component 
{ 
    render() { 
     return (
      <div> 
      <Announcement /> 
      </div> 
     ); 
    } 
} 


    class Announcement extends React.Component 
    { 
     render(){ 
      return (

     <div></div> 
     ); 
    } 
} 


     /** 
    * @jsx React.DOM 
    */ 


    ReactDOM.render(<AnnouncementDashboard />,  document.getElementById('container'));

aktualisiert, html enthalten.

<!DOCTYPE html> 

<html> 

    <head> 
    <meta charset="utf-8"> 
    <!-- Disable browser cache --> 
    <meta http-equiv="cache-control" content="max-age=0" /> 
    <meta http-equiv="cache-control" content="no-cache" /> 
    <meta http-equiv="expires" content="0" /> 
    <meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" /> 
    <meta http-equiv="pragma" content="no-cache" /> 
    <title>Project Two: Timers</title> 
    <link rel="stylesheet" href="vendor/semantic-ui/semantic.min.css" /> 
    <link rel="stylesheet" href="style.css" /> 
    <script src="vendor/babel-core-5.8.25.js"></script> 
    <script src="vendor/react.js"></script> 
    <script src="vendor/react-dom.js"></script> 
    <script src="vendor/uuid.js"></script> 
    <script src="vendor/fetch.js"></script> 
    </head> 

    <body> 
    <div id="main" class="main ui"> 
    <h1 class="ui dividing centered header">Timers</h1> 
    <div id="container"></div> 
    </div> 
    <script type="text/babel" src="./client.js"></script> 
    <script type="text/babel" src="./helpers.js"></script> 

    <script type="text/babel" data-plugins="transform-class-properties" src="./app.js"></script> 


    </body> 

</html>

ein Szenario Hinzufügen, das funktioniert:

/* eslint-disable react/prefer-stateless-function */ 
/* eslint-disable react/jsx-boolean-value */ 

class AnnouncementDashboard extends React.Component 
    { 
    render() { 
    return (<div>"I'm am React, when something goes wrong I always say - unexpected token" </div>); 
    } 
    } 






ReactDOM.render(<AnnouncementDashboard/>, document.getElementById('container'));

Quelle

2017-11-30 Diego Alves

loswerden; am Ende der Renderfunktion – mikeb

Der Grund für diesen Fehler ist, weil die Syntax ungültig ist. Also ich denke nicht, dass dein Babel-Setup funktioniert, kannst du mehr Infos dazu liefern? –

Babel ist eingerichtet, ich habe die Anwendung mit anderen Komponenten aus einer anderen Datei getestet. –

das einzige Problem, das ich sehe, ist die AnnouncementsDashboard Komponente einen abschließenden Schrägstrich auf dem Behälter div fehlt. Außerdem würde ich den Code restrukturieren, um zustandslose Funktionen zu verwenden. Es sei denn, Sie planen, ihnen später einen Status hinzuzufügen.

const Announcement =() => { 
    return (
    <div></div> 
); 
} 

const AnnouncementList =() => { 
    return (
    <div> 
     <Announcement /> 
    </div> 
); 
} 

const AnnouncementsDashboard =() => { 
    return (
    <div> 
     <AnnouncementList/> 
    </div> 
); 
}

Quelle

2017-11-30 20:24:39 link0047

Reacjs bekomme die generische Fehlermeldung "Unerwartetes Token"

Antwort

Verwandte Themen