React Js 获得通用的“意外令牌”错误消息答案

【问题标题】：Reacjs getting the generic "unexpected token" error messageReact Js 获得通用的“意外令牌”错误消息
【发布时间】：2017-11-30 15:29:27
【问题描述】：

我是 Reactjs 的新手，在我第一次尝试构建一系列组件时遇到了“意外的令牌错误”。

我的控制台报告了这个：

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

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

在 Google 上搜索控制台输出时，我感到非常沮丧，当我们在搜索关键字中插入代码时，它真的很混乱。我已经设置了 babel 插件。

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

【问题讨论】：

摆脱你的;在渲染函数结束时
这个错误的原因是语法无效。所以我认为你的 Babel 设置不起作用，你能提供更多信息吗？
Babel 已经设置好了，我已经用另一个文件中的其他组件测试了这个应用程序。
我拿走了 ;在文件末尾，错误仍然存在。
你的 babel 使用 webpack 吗？

标签： reactjs babeljs jsx

【解决方案1】：

我看到的唯一问题是 AnnouncementsDashboard 组件缺少容器 div 上的右斜杠。此外，我会重组代码以使用无状态函数。除非您打算稍后向它们添加状态。

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

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

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

【讨论】：