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>

第一个组件＆＃39;反应＆＃39;渲染得很好。但是第二个“反应桶”，它使用与相似数据相同的精确逻辑，根本不会渲染。 Webpack引发以下错误：

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

反对{justBucketDOMElement} - 指着＆＃34; {＆＃34;

以下是反应组件的代码

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

模块构建失败：SyntaxError：尝试呈现第二个组件时出现意外的令牌错误

1 个答案: