Реакция на использование Ссылка на весь tr не удалась

<tbody> 
       {map(items, item => 
        <Link to={routeUrl(ROUTES.SOMEWHERE, item.id)}> 
        <tr key={item.id}> 
         <td> 
          {item.name} 
         </td> 
         <td> 
          {item.country} 
         </td> 
         </tr> 
        </Link> 
       )} 
      </tbody>

Это не сработает, подскажите почему? Я могу поместить компонент Link в td, но хочу, чтобы вся строка была доступна для кликов.Реакция на использование Ссылка на весь tr не удалась

источник

2017-02-12 Jessica Robertson

Это не приводит к допустимому HTML, теги tbody могут содержать только теги tr, теги tr могут содержать только теги td или th, см. [Link] (http: // www. w3schools.com/tags/tag_table.asp). – ccKep

@ccKep, где я должен поставить компонент Link? –

В тексте (например, внутри 'td') вам нужна ссылка. Если вы хотите, чтобы целая строка была нажата, у вас действительно есть только 2 варианта: a) события JS on-click, вызывающие изменение 'window.location' ([пример] (http://stackoverflow.com/questions/17147821/how- to-make-a-whole-row-in-a-table-clickable-as-a-link)) b) Создайте теги 'a', чтобы они выглядели как строка таблицы и не использовали HTML'

' вообще. – ccKep

ответ

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

источник

2017-02-12 08:55:05

Реакция на использование Ссылка на весь tr не удалась

ответ

Смежные вопросы