单击 table 时如何使每一行动态显示？

Question

我有以下 table 在 Django 中制作，我想做同样的事情，但要有反应。

我希望 table 中的每一行都可以通过指向所述记录的动态 link 进行点击。

示例：

<tbody>
  {% for i in inventories %}
  <tr onclick="location.href='/inventory/detail/{{i.id}}'">
    <td>{{i.name}}</td>
  </tr>
  {% endfor %}
</tbody>

反应：

<Tbody>
  {companies.map((company, index) => (
    <Tr key={index}>
      <Td>{company.company_id}</Td>
      <Td>{company.social_reason_name}</Td>
      <Td>{company.comercial_name}</Td>
      <Td>{company.alias_name}</Td>
      <Td>{company.rnc}</Td>
    </Tr>
  ))}
</Tbody>

如何使 table 中的每个 Tr 行成为动态 link？

Answer 1

导入Link组件，将行内容换行。计算目标路径并将其传递给 Link 组件的 to prop.

示例：

import { Link } from 'react-router-dom';

...

<Tbody>
  {companies.map((company, index) => (
    <Tr key={index}>
      <Link to={`/company/detail/${company.company_id}`}>
        <Td>{company.company_id}</Td>
        <Td>{company.social_reason_name}</Td>
        <Td>{company.comercial_name}</Td>
        <Td>{company.alias_name}</Td>
        <Td>{company.rnc}</Td>
      </Link>
    </Tr>
  ))}
</Tbody>

单击 table 时如何使每一行动态显示？

How can I make each row of my table dynamic when I click on it?

html-table

hyperlink

reactjs

react-router-dom