如何使用 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>
  )
};