Module build failed: SyntaxError: Unexpected token error when trying to render a second component

Question

总的来说，我是 ReactJs 或 UI 编码的新手。花了一整天的时间试图调试这个问题，但无济于事。我的 ReactJs 应用程序中只有一个入口点 - app.js

var React = require("react");
var ReactDOM = require("react-dom");
import Main from "./components/Main";
import Bucket from "./components/Bucket";
import Relay from "react-relay";

ReactDOM.render(<Main />,document.getElementById('react'));
ReactDOM.render(<Bucket />,document.getElementById('react-bucket'));

console.log(Relay.QL`query Test {ServerGroups {_id}}`);

我正在尝试在此处的单个页面中呈现 2 个组件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>RGR</title>
<script src="react-0.14.3.min.js"></script>
<script src="react-dom-0.14.3.min.js"></script>
</head>
<body>
<div id="react"></div>
<div id="react-bucket"></div>
<script src="bundle.js"></script>
<body>
</html>

第一个组件 'react' 呈现得很好。但是第二个 'react-bucket'，它使用具有相似数据的完全相同的逻辑，根本不呈现。 Webpack 抛出以下错误：

模块构建失败：SyntaxError：意外的令牌，预期

针对 {justBucketDOMElement} - 指向“{”

下面是react组件的代码

render(){
  return(
    <table>
      <tbody>
      <tr>
        <th>AppName</th>
        <th>BucketName</th>
        <th>RAMQuotaInGB</th>
        <th>ReplicaNumber</th>
        <th>ServerList</th>
      </tr>
      {
        this.state.allBuckets.map(function(oneAppBucket){
          var justBucketDOMElement = oneAppBucket.buckets.map(function(bucketInfo){
            return(
              <tr>
                <td key={bucketInfo.bucket_name}>{bucketInfo.bucket_name}</td>
                <td key={bucketInfo.bucket_name}>{bucketInfo.evictionPolicy}</td>
                <td key={bucketInfo.RAMQuota}>{bucketInfo.RAMQuota}</td>
                <td key={bucketInfo.ReplicaNumber}>{bucketInfo.ReplicaNumber}</td>
                <td key={bucketInfo.ServerList[0]}>{bucketInfo.ServerList.join(",")}</td>
              </tr>
            )
          });
          return(
            <tr><td key={oneAppBucket.app_name}>{oneAppBucket.app_name}</td></tr>
          {justBucketDOMElement}    **// this is where the error happens**
          )
        })
      }
      </tbody>
    </table>
  );
}

返回的数据如下：

 {
"BucketList": [
  {
    "app_name": "gem",
    "buckets": [
      {
        "evictionPolicy": "valueOnly",
        "RAMQuota": 3,
        "ReplicaNumber": 1,
        "ServerList": [
          "lpdcbc01a.phx.aexp.com:11210",
          "lpdcbc01b.phx.aexp.com:11210",
          "lpdcbc01c.phx.aexp.com:11210"
        ],
        "bucket_name": "config"
      },
      {
        "evictionPolicy": "valueOnly",
        "RAMQuota": 3,
        "ReplicaNumber": 1,
        "ServerList": [
          "lpdcbc01a.phx.aexp.com:11210",
          "lpdcbc01b.phx.aexp.com:11210",
          "lpdcbc01c.phx.aexp.com:11210"
        ],
        "bucket_name": "failed_events"
      },
      {
        "evictionPolicy": "valueOnly",
        "RAMQuota": 6,
        "ReplicaNumber": 1,
        "ServerList": [
          "lpdcbc01a.phx.aexp.com:11210",
          "lpdcbc01b.phx.aexp.com:11210",
          "lpdcbc01c.phx.aexp.com:11210"
        ],
        "bucket_name": "events"
      }
    ]
  }

非常感谢您的帮助。真的被这个难住了。

Answer 1

问题是，return 应该返回一个对象，您可以尝试用 div 包装它们。

return(
    <div>
        <tr><td key={oneAppBucket.app_name}>{oneAppBucket.app_name}</td></tr>
        {justBucketDOMElement}    **// this is where the error happens**
    </div>
)

Module build failed: SyntaxError: Unexpected token error when trying to render a second component

Module build failed: SyntaxError: Unexpected token error when trying to render a second component

javascript

reactjs

webpack

reactjs-flux