我有一个反应表(使用react-table)组件,如下所示。在列State中,我想在每个单元格中使用动态值渲染按钮。我想从服务器数据中获取这些值。
{
//Header: 'Download',
id: 'request_state',
filterable: false,
Cell: ({index}) =>
(<Button id={"approve_" + index}
value={<FormattedMessage id={"Approve_" + index} defaultMessage={"Approved"}
fontSize={14}
minHeight={33}
minWidth={"100%"}
backgroundColor="transparent"
borderRadius={5}
icon={<Download size={13} color={'black'}></Download>}
onClick={() => this.handleDownloadDelivery(index)}
/>)
}
使用上面的代码,我可以使用值“Approved”填充每个单元格中的按钮。但是,我想使用属性值动态填充此值,该属性值来自服务器对象“data”的request_state属性。使用“accessor:”我可以访问服务器端数据的这些属性值,但我无法对“Cell:”执行相同的操作。我可以使用访问器看到“邀请”字符串:
{
Header: 'State',
id: 'request_state',
filterable: false,
accessor: data =>{
let output =[];
output = data.request_state;
return output;
},
}
我基本上想要下面的内容:
{
//Header: 'Download',
id: 'request_state',
filterable: false,
Cell: ({index}) =>
(<Button id={"approve_" + index}
value={<FormattedMessage id={"Approve_" + index} defaultMessage={data.request_state}}
fontSize={14}
minHeight={33}
minWidth={"100%"}
backgroundColor="transparent"
borderRadius={5}
icon={<Download size={13} color={'black'}></Download>}
onClick={() => this.handleDownloadDelivery(index)}
/>)
}
答案 0 :(得分:0)
我解决了它如下:
{
id: 'invite_accept',
filterable: false,
accessor: data => {
let output =[];
output = data.request_state;
if(output == 'invited') {
output = 'Accept Invitation'
}
return output;
},
Cell: props => <Button id={"Approve_" + props}
value={<FormattedMessage id={"Approve_" + props} defaultMessage={props.value}/>}
fontSize={14}
minHeight={33}
minWidth= {"100%"}
backgroundColor="transparent"
border={10}
borderRadius={5}
icon={<Eye size={14} color={'black'}></Eye>}
onClick={() => this.handleApproveOrRequestDelivery(props)}
/>
},