Как избавиться от стиля при использовании Link Component в React - PullRequest
Новая
       5

Как избавиться от стиля при использовании Link Component в React

0 голосов
/ 24 марта 2020

В моем приложении есть таблица, в которой, когда пользователь щелкает строку этой таблицы, они перенаправляются на другую страницу приложения. Когда я применяю компонент ссылки к каждой строке таблицы, стилизация строки нарушается.

Итак, вот как это должно выглядеть на самом деле (на самом деле это выглядит так, когда я не применяю компонент ссылки к каждой строке таблицы):

How the table should be actually looking

И вот как это выглядит, когда я применяю компонент ссылки к каждой строке таблицы:

How the table looks when I apply the link component to each row

Ниже приведен код для рендеринга таблицы: 

  /*
  * Method for rendering the table
  * @param {Array} TableData - Table containing the list of products
  */
  renderTable = TableData => {
    return TableData.map((item, i) => (
      <tr key={i}>
        <Link to="/productServices/:productID">
        <td>1.</td>
        <td>{item.productName}</td>
        <td>{item.description}</td>
        <td>{item.department}</td>
        </Link>
      </tr>
    ));
  };

Любая помощь будет принята с благодарностью. Спасибо!

1 Ответ

2 голосов
/ 24 марта 2020

Проблема в том, что вы вводите недопустимый HTML внутри тега tr, и это нарушает весь макет.

Вы должны использовать td и th только для контролировать размер и поток вашей строки таблицы (tr). Вы можете использовать обработчик onClick в строке таблицы, но это было бы нежелательно для доступности, и вы бы обязательно контролировали навигацию в своем приложении .

Вот как это будет выглядеть onClick: 

  const handleNavigation = () => {
    // run react-router code for imperative navigation  
  }

  /*
  * Method for rendering the table
  * @param {Array} TableData - Table containing the list of products
  */
  renderTable = TableData => {
    return TableData.map((item, i) => (
      <tr key={i} onClick={handleNavigation}> 
        <td>1.</Link></td>
        <td>{item.productName}</td>
        <td>{item.description}</td>
        <td>{item.department}</td>
      </tr>
    ));
  };

Я предлагаю пропустить Link внутри каждого `td. Это не нарушило бы стиль, но также дало бы возможность пользователю щелкнуть в любом месте строки таблицы и перейти по ней соответствующим образом: 

  /*
  * Method for rendering the table
  * @param {Array} TableData - Table containing the list of products
  */
  renderTable = TableData => {
    return TableData.map((item, i) => (
      <tr key={i}> 
        <td><Link to="/productServices/:productID">1.</Link></td>
        <td><Link to="/productServices/:productID">{item.productName}</Link></td>
        <td><Link to="/productServices/:productID">{item.description}</Link></td>
        <td><Link to="/productServices/:productID">{item.department}</Link></td>
      </tr>
    ));
  };

Вот очень простой пример кода выше, на упрощенной таблице. Благодаря стилю, позволяющему сделать ссылку 100%.

Вы можете дополнительно расширить его, чтобы он стал компонентом, который вы будете использовать для переноса содержимого ячейки таблицы внутри ссылки и повторного использования в ваших таблицах.

...