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

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

0 голосов
/ 25 сентября 2019

Я создаю таблицу в проекте 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, пришлось переименовать его, как я ссылаюсь на Ссылку из пользовательского интерфейса Материала далее в Компоненте.

Ответы [ 3 ]

2 голосов
/ 25 сентября 2019

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

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

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

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

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

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

0 голосов
/ 25 сентября 2019

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

...