Подтвердить что ты не робот

React-router: использование <Link> как строки таблицы данных с возможностью нажатия

Я новичок в использовании ReactJS и реактивного маршрутизатора. Я хочу щелкнуть строку таблицы и что-то вроде следующей настройки:

<Link to="#">
<tr>
    <td>{this.props.whatever1}</td>
    <td>{this.props.whatever2}</td>
    <td>{this.props.whatever3}</td>
</tr>
</Link>

но я знаю, что вы не можете поместить теги <a> между тегами <tbody> и <tr>. Как еще я могу это сделать?

PS: Я предпочитаю не использовать jQuery, если это возможно.

Ответ 1

Почему бы вам просто не использовать onClick?

var ReactTable = React.createClass({
  handleClick: function(e) {
    this.router.transitionTo('index');
  },
  render: function() {
    return(
      <div>
        <table>
          <thead>
            <tr>
              <th>Name</th>
              <th>Age</th>
              <th>Full Detail</th>
            </tr>
          </thead>
            <tbody>
              <tr onClick={this.handleClick.bind(this)}>
                <td>{user.name}</td>
                <td>{user.age}</td>
                <td>{details}</td>
              </tr>
            </tbody>
        </table>
      </div>
    );
  }
});

Ответ 2

onClick работает, но иногда вам нужен фактический тег <a> по разным причинам:

Доступность
Прогрессивное улучшение (если script выдает ошибку, ссылки все еще работают)
Возможность открытия ссылки на новой вкладке
Возможность копирования ссылки

В аналогичном случае я создал Td-компонент:

import React, { PropTypes } from 'react';
import { Link } from 'react-router';

import styles from './styles.css';

const propTypes = {
  children: PropTypes.node.isRequired,
  to: PropTypes.string,
};

function Td({ children, to }) {
  // Conditionally wrapping content into a link
  const content = to ? (
    <Link className={styles.content} to={to}>{children}</Link>
  ) : (
    <div className={styles.content}>{children}</div>
  );

  return (
    <td>
      {content}
    </td>
  );
}

Td.propTypes = propTypes;

export default Td;

Стили, чтобы кнопка заполнила всю ячейку:

.content {
  display: block;
  color: inherit;
  padding: 5px 10px;
}

Затем используйте компонент следующим образом:

const users = this.props.users.map((user) =>
      <tr key={user.id}>
        <Td to={`/users/${user.id}/edit`}>{user.name}</Td>
        <Td to={`/users/${user.id}/edit`}>{user.email}</Td>
        <Td to={`/users/${user.id}/edit`}>{user.username}</Td>
      </tr>
    );

Да, вам придется проходить to prop несколько раз, но при этом у вас больше контроля над областями, на которые можно щелкнуть, и вы можете иметь другие интерактивные элементы в таблице, например флажки.