如何在 jsx 中编写脚本？

Question

我试图在我的 React js 项目中使用 table 显示数据，但它给出了一个错误 Unexpected token, expected ":"。编写此代码的正确方法是什么？

感谢任何帮助。

这是我的问题代码：

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

您有一些语法错误。

代码应该是..我在我的 phone 上做了这个所以仔细检查并告诉我。

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 和地图函数括号丢失。

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

如何在 jsx 中编写脚本？

how to write script inside jsx?

jsx

reactjs