如何在jsx内编写脚本?

Question

我试图在我的react js项目中使用表显示数据，但它给出了一个错误意外令牌，预期";写这段代码的正确方法是什么?

任何帮助都是感激的。

这是我的问题代码:

return (
<div className="mb-4">
{
toko.length > 0 
? (
<Table striped>
<thead>
<tr>
<th className="ps-3">Info Toko</th>
<th className="text-center">Action</th>
</tr>
</thead>
<tbody>
{toko.map((item, index) => {
return (
<tr key={index}>
<td>
<Link to={`/view_toko/${item.id}`}>
<label className="fs-5">{item.nama}</label>
</Link>
</td>
<td>
<div className="text-center">
<Button onClick={() => onSelect(item.id)} variant="info" className="mb-2">Pilih</Button>
</div>
</td>
</tr>
)}
</tbody> // the error points to this line
</Table>
)
) : (
<div>
<em>No data</em>
</div>
)
}
</div>
)

Answer 1

缺少返回和映射函数括号。

return (
<div className="mb-4">
{toko.length > 0 ? (
<Table striped>
<thead>
<tr>
<th className="ps-3">Info Toko</th>
<th className="text-center">Action</th>
</tr>
</thead>
<tbody>
{toko.map((item, index) => {
return (
<tr key={index}>
<td>
<Link to={`/view_toko/${item.id}`}>
<label className="fs-5">{item.nama}</label>
</Link>
</td>
<td>
<div className="text-center">
<Button
onClick={() => onSelect(item.id)}
variant="info"
className="mb-2"
>
Pilih
</Button>
</div>
</td>
</tr>
);
})}
</tbody>
</Table>
) : (
<div>
<em>No data</em>
</div>
)}
</div>
)

Answer 2

您有几个语法错误。

代码应该是…我是在手机上做的，所以请仔细检查并告诉我。

return (
<div className="mb-4">
{
toko.length > 0 
? (
<Table striped>
<thead>
<tr>
<th className="ps-3">Info Toko</th>
<th className="text-center">Action</th>
</tr>
</thead>
<tbody>
{toko.map((item, index) => {
return (
<tr key={index}>
<td>
<Link to={`/view_toko/${item.id}`}>
<label className="fs-5">{item.nama}</label>
</Link>
</td>
<td>
<div className="text-center">
<Button onClick={() => onSelect(item.id)} variant="info" className="mb-2">Pilih</Button>
</div>
</td>
</tr>
)
)}
</tbody> 
</Table>
)
})
: (
<div>
<em>No data</em>
</div>
)
}
</div>