如何将动态 link 添加到 table 数据
How to add dynamic link to table data
我正在使用 ReactJs 和 ant design 开发一个简单的 table,我的问题是我不知道如何使用它们的数据键给链接赋值。
谢谢,
示例代码
const { Table } = antd;
const columns = [{
title: 'Name',
dataIndex: 'name',
render: text => <a href="#">{text}</a>,
}, {
title: 'Cash Assets',
className: 'column-money',
dataIndex: 'money',
}, {
title: 'Address',
dataIndex: 'address',
}];
const data = [{
key: '1',
name: 'John Brown',
money: '¥300,000.00',
address: 'New York No. 1 Lake Park',
}, {
key: '2',
name: 'Jim Green',
money: '¥1,256,000.00',
address: 'London No. 1 Lake Park',
}, {
key: '3',
name: 'Joe Black',
money: '¥120,000.00',
address: 'Sidney No. 1 Lake Park',
}];
ReactDOM.render(
<Table
columns={columns}
dataSource={data}
bordered
title={() => 'Header'}
footer={() => 'Footer'}
/>
, mountNode);
如您所见,列呈现逻辑由 columns
对象数组提供。所以如果你想包含任何逻辑(比如给 URL 赋值),你必须改变相应对象的 render
键:
const columns = [{
title: 'Name',
dataIndex: 'name',
render: text => <a href={`http://<some-domain>.com/user/${text.split(' ').join()}`}>{text}</a>, // changed function, so that data maps to links. eg: http:??<some-domain>.com/user/JohnBrown
}, {
/* */
}, {
/* */
}];
或者,您可以创建一个对象来查找 url,如下所示:
const mapping = {
'John Brown': 'http://yourdomain.com/user/134123',
'Jin Green': 'http://yourdomain.com/user/897983',
/* more persons */
}
const columns = [{
title: 'Name',
dataIndex: 'name',
render: text => <a href={mapping[text]}>{text}</a>, // changed function
}, {
/* */
}, {
/* */
}];
改变这个
render: text => <a href="#">{text}</a>
至此
render: (text, record) => <a href={'user/' + record.name}>{text}</a>
如果您使用路由器
render: (text, record) => <Link to={'user/' + record.name}>{text}</Link>
我正在使用 ReactJs 和 ant design 开发一个简单的 table,我的问题是我不知道如何使用它们的数据键给链接赋值。
谢谢,
示例代码
const { Table } = antd;
const columns = [{
title: 'Name',
dataIndex: 'name',
render: text => <a href="#">{text}</a>,
}, {
title: 'Cash Assets',
className: 'column-money',
dataIndex: 'money',
}, {
title: 'Address',
dataIndex: 'address',
}];
const data = [{
key: '1',
name: 'John Brown',
money: '¥300,000.00',
address: 'New York No. 1 Lake Park',
}, {
key: '2',
name: 'Jim Green',
money: '¥1,256,000.00',
address: 'London No. 1 Lake Park',
}, {
key: '3',
name: 'Joe Black',
money: '¥120,000.00',
address: 'Sidney No. 1 Lake Park',
}];
ReactDOM.render(
<Table
columns={columns}
dataSource={data}
bordered
title={() => 'Header'}
footer={() => 'Footer'}
/>
, mountNode);
如您所见,列呈现逻辑由 columns
对象数组提供。所以如果你想包含任何逻辑(比如给 URL 赋值),你必须改变相应对象的 render
键:
const columns = [{
title: 'Name',
dataIndex: 'name',
render: text => <a href={`http://<some-domain>.com/user/${text.split(' ').join()}`}>{text}</a>, // changed function, so that data maps to links. eg: http:??<some-domain>.com/user/JohnBrown
}, {
/* */
}, {
/* */
}];
或者,您可以创建一个对象来查找 url,如下所示:
const mapping = {
'John Brown': 'http://yourdomain.com/user/134123',
'Jin Green': 'http://yourdomain.com/user/897983',
/* more persons */
}
const columns = [{
title: 'Name',
dataIndex: 'name',
render: text => <a href={mapping[text]}>{text}</a>, // changed function
}, {
/* */
}, {
/* */
}];
改变这个
render: text => <a href="#">{text}</a>
至此
render: (text, record) => <a href={'user/' + record.name}>{text}</a>
如果您使用路由器
render: (text, record) => <Link to={'user/' + record.name}>{text}</Link>