javascript 如何在 React Table 中使一列中的条目可点击？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/46073694/
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
How to make the entries in one column clickable in React Table?
提问by SeaWarrior404
Im using React Table(http://react-table.js.org) to display a table in a page and populate it with data called from an API. I want to make the values displayed in one of the columns as links(a hrefs). This particular column contains only URLs. How to implement this in React Table?
我使用 React Table（http://react-table.js.org）在页面中显示一个表，并用从 API 调用的数据填充它。我想让其中一列中的值显示为链接（a hrefs）。此特定列仅包含 URL。如何在 React Table 中实现这个？
columns: [
{
filterable: false,
Header: 'Click here',
accessor: 'link',
render: e => <a href={e.value}> {e.value} </a>,
},
],
Im taking "e" as the data which is being displayed in the table and wrapping it in ahref to convert it as a link. However, this approach is not working.
我将“e”作为显示在表格中的数据并将其包装在 ahref 中以将其转换为链接。但是，这种方法不起作用。
回答by Henrique Oecksler Bertoldi
This is simple as the documentation shows. Change render by Cell. Like this:
这很简单，如文档所示。按单元更改渲染。像这样：
Cell: e =><a href={e.value}> {e.value} </a>
回答by bennygenel
From the docs; You can set custom components for cells.
Example:
例子：
<ReactTable
data={data}
columns={[{
Header: 'Name',
columns: [{
Header: 'First Name',
accessor: 'firstName'
}, {
Header: 'Last Name',
id: 'lastName',
accessor: d => d.lastName
}]
}, {
Header: 'Info',
columns: [{
Header: 'Profile Progress',
accessor: 'progress',
Cell: row => (
<div
style={{
width: '100%',
height: '100%',
backgroundColor: '#dadada',
borderRadius: '2px'
}}
>
<div
style={{
width: `${row.value}%`,
height: '100%',
backgroundColor: row.value > 66 ? '#85cc00'
: row.value > 33 ? '#ffbf00'
: '#ff2e00',
borderRadius: '2px',
transition: 'all .2s ease-out'
}}
/>
</div>
)
}, {
Header: 'Status',
accessor: 'status',
Cell: row => (
<span>
<span style={{
color: row.value === 'relationship' ? '#ff2e00'
: row.value === 'complicated' ? '#ffbf00'
: '#57d500',
transition: 'all .3s ease'
}}>
●
</span> {
row.value === 'relationship' ? 'In a relationship'
: row.value === 'complicated' ? `It's complicated`
: 'Single'
}
</span>
)
}]
}]}
defaultPageSize={10}
className="-striped -highlight"
/>
