如何使用 React js 使表格的整行可点击<link>或任何其他方式？

Question

这是代码

<tbody>
    <tr>
     <td>
      <Link to={{pathname: '/user',
                 state: {
                   number: content.number,
                   name: content.name,
                   age: content.age
                 }
               }}
      />
     {content.accountOwner}
    </td>
    <td>
      {content.address}
   </td>
   <td>{content.profession}</td
  </tr>
</tbody>

此行在 chrome 中变为可点击，但在 IE 中，因为放在第一列中，只有第一列变为可点击，而不是整行。 谁能帮我解决这个问题？

Answer 1

您可以使用.push()方法以编程方式导航到该页面。 如果你使用的是最新的react-router-dom ，你可以使用useHistory钩子来使用 push 方法。 push()的另一个优点不会破坏您的 UI，因为<Link />组件可能会导致您的 UI 出现问题，因为它是另一个嵌套的元素。

import React from 'react';
import { useHistory } from 'react-router-dom';

export const ExampleComponent = ({ content }) => {
  const history = useHistory();

  function handleRowClick() {
    const { number, name, age } = content;
    history.push('/user', { number, name, age });
  }

  return (
    <tbody>
      <tr onClick={handleRowClick}>
        <td>
          {content.accountOwner}
        </td>
        <td>
          {content.address}
        </td>
        <td>{content.profession}</td>
      </tr>
    </tbody>
  )
};