总的来说，我对 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:意外的 token ，预期
针对 {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"
}
]
}
非常感谢您的帮助。真的是被这个难住了。
最佳答案
问题是，return 应该返回一个对象，您可以尝试用 div 包装它们。
return(
<div>
<tr><td key={oneAppBucket.app_name}>{oneAppBucket.app_name}</td></tr>
{justBucketDOMElement} **// this is where the error happens**
</div>
)
关于javascript - 模块构建失败: SyntaxError: Unexpected token error when trying to render a second component，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45248043/