Question

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

Answer 1

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

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

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

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

Reacjs获取通用的“意外令牌”错误消息

1 个答案: