validateDOMNesting (...): <td>не может отображаться как дочерний элемент <a>

Question

Я создаю таблицу в проекте React с использованием Material UI, но я получаю эту ошибку.Я пытаюсь, чтобы вся строка была ссылкой на страницу, которая содержит больше информации по теме.Это фрагмент кода таблицы:

<TableBody>
  {data.map((item, index) => {
    return (
      <TableRow key={index} className={classes.row} component={RouterLink} to={`/subject/${item.Name}`}>
        <TableCell scope="row">{item.Id}</TableCell>
        <TableCell scope="row">{item.Name}</TableCell>
        <TableCell scope="row">{item.Group}</TableCell>
      </TableRow>
    )
  })}
</TableBody>

Я пишу код в Typescript, если это как-то связано с проблемой.RouterLink - это Ссылка отact-router-dom, пришлось переименовать его, как я ссылаюсь на Ссылку из пользовательского интерфейса Материала далее в Компоненте.

Answer 1

Я пытаюсь, чтобы вся строка была ссылкой ...

Вы не можете этого сделать.a не является допустимым дочерним элементом для table или tbody или tr и (как говорится в сообщении об ошибке) td не является допустимым дочерним элементом для элемента a.

Есть и другие вещи, которые вы можете сделать:

• Вы можете иметь обработчик щелчка на tr и выполнять действие при нажатии (но это не может быть действительный элемент a).
• Вы можете использовать a элементов вокруг содержимого каждого td.
• (довольно часто). У вас может быть один td, содержащий ссылку.

Answer 2

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

Рассматривали ли вы добавление дополнительной ячейки со значком ссылки, который правильно помечен (aria-label), как предложено в https://stackoverflow.com/a/58093606/3406963?

Answer 3

Кажется, вы забыли приложить ошибку.в любом случае, ответ, приведенный выше мистером Краудером, объясняет это в деталях.Вариант i) поместить обработчик щелчка на tr и iii) обернуть tr в a можно реализовать.