我希望我的第一列标题名称接受来自我的 graphql 查询的 2 个数据。"rocket.rocket_name"
和 "links.wikipedia"
显示在渲染 href 上。
但似乎 dataIndex 只接受一个字符串。
const { Table, Divider, Tag } = antd;
const columns = [{
title: 'Name',
dataIndex: 'rocket.rocket_name',
key: 'name',
render: text => <a href="www.google.com">{text}</a>,
}, {
title: 'Description',
dataIndex: 'details',
key: 'age',
}];
const data = [
{
"id": "77",
"rocket": {
"rocket_name": "Falcon Heavy",
"rocket": {
"active": true
}
},
"links": {
"wikipedia": "https://en.wikipedia.org/wiki/Arabsat-6A"
},
"details": "SpaceX will launch Arabsat 6A to a geostationary transfer orbit from SLC-39A, KSC. The satellite is a geostationary telecommunications satellite built by Lockheed Martin for the Saudi Arabian company Arabsat. This will be the first operational flight of Falcon Heavy, and also the first Block 5 Falcon Heavy. All three cores will be new Block 5 cores. The side cores are expected to land at LZ-1 and LZ-2, and the center core is expected to land on OCISLY."
}
]
ReactDOM.render(<Table columns={columns} dataSource={data} />, mountNode);
最佳答案
如果要使用 2 列的组合值创建单元格,请使用列 render
的第二个参数功能。
摘自 antd
documentation :
在这里,text
是由 dataIndex
指定的列的值, 和 record
将是带有行(所有列的值)的对象。
const columns = [
{
title: 'Name',
// dataIndex: 'rocket.rocket_name', // antd v3
dataIndex: ['rocket', 'rocket_name'], // antd v4
key: 'name',
render: (text, record) => <a href={record.links.wikipedia}>{text}</a>,
},
{
title: 'Description',
dataIndex: 'details',
key: 'age',
}
];
关于reactjs - 来自 Ant 表的 dataIndex 接受 2 个传入数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55729482/