Javascript React-router：使用 <Link> 作为可点击的数据表行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35565012/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
React-router: Using <Link> as clickable data table row
提问by jfrye
I'm new to using ReactJS and react-router. I want a clickable table row and something like the following setup:
我是使用 ReactJS 和 react-router 的新手。我想要一个可点击的表格行和类似以下设置的内容：
<Link to=“#”>
<tr>
<td>{this.props.whatever1}</td>
<td>{this.props.whatever2}</td>
<td>{this.props.whatever3}</td>
</tr>
</Link>
but I know you can't put <a>tags between the <tbody>and <tr>tags. How else can I accomplish this?
但我知道你不能<a>在<tbody>和<tr>标签之间放置标签。我还能如何做到这一点？
PS: I prefer not to use jQuery if possible.
PS：如果可能，我不想使用 jQuery。
采纳答案by Sergio Flores
Why don't you just use onClick?
为什么不直接使用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>
);
}
});
回答by Igor Barbashin
onClickworks, but sometimes you need an actual <a>tag for various reasons:
onClick有效，但有时<a>由于各种原因您需要一个实际的标签：
- Accessibility
- Progressive enhancement (if script is throwing an error, links still work)
- Ability to open a link in new tab
- Ability to copy the link
- 无障碍
- 渐进增强（如果脚本抛出错误，链接仍然有效）
- 能够在新标签中打开链接
- 复制链接的能力
Here's an example of a Td component that accepts toprop:
下面是一个接受toprop的 Td 组件示例：
import React from 'react';
import { Link } from 'react-router-dom';
export default function Td({ children, to }) {
// Conditionally wrapping content into a link
const ContentTag = to ? Link : 'div';
return (
<td>
<ContentTag to={to}>{children}</ContentTag>
</td>
);
}
Then use the component like this:
然后像这样使用组件：
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>
);
Yes, you'll have to pass toprop multiple times, but at the same you have more control over the clickable areas and you may have other interactive elements in the table, like checkboxes.
是的，您必须多次传递toprop，但同时您可以更好地控制可点击区域，并且表格中可能还有其他交互式元素，例如复选框。
