Reacjs가 "예기치 않은 토큰"이라는 일반 오류 메시지가 나타나는 경우

Reactjs를 처음 사용하고 일련의 구성 요소를 처음 만들 때 "예기치 않은 토큰 오류"가 나타납니다.Reacjs가 "예기치 않은 토큰"이라는 일반 오류 메시지가 나타나는 경우

내 콘솔 보고서이 : 우리는 검색 키워드에 코드를 삽입 할 때 정말 엉망으로 구글의 콘솔 출력을 검색 할 때 정말 좌절 가지고

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

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

. 바벨 플러그인을 설치했습니다.

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

업데이트 됨, html 포함.

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

작동하는 시나리오 추가 : 내가 볼

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

출처

2017-11-30 Diego Alves

렌더링 함수가 끝날 때 – mikeb

이 오류의 원인은 구문이 유효하지 않기 때문입니다. 그래서 나는 바벨 설치가 효과가 있다고 생각하지 않습니다. 그것에 대해 더 많은 정보를 제공해 줄 수 있습니까? –

Babel이 설치되었습니다. 다른 파일의 다른 구성 요소로 응용 프로그램을 테스트했습니다. –

유일한 문제는 AnnouncementsDashboard 구성 요소가 컨테이너 사업부에 닫는 슬래시가 누락입니다. 또한 무국적 기능을 사용하도록 코드를 재구성 할 것입니다. 나중에 상태를 추가 할 계획이 아니라면 말입니다.

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

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

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

출처

2017-11-30 20:24:39 link0047

Reacjs가 "예기치 않은 토큰"이라는 일반 오류 메시지가 나타나는 경우

답변

관련 문제