我在反应中使用 react-bootstrap-table 作为 datatable,这里从后端获取 c=data 作为 JSON 对象。如何将 ahref 动态添加到 react-bootstrap-table 中的列中
const data = [
{
id: 0,
name: 'John Doe',
registered: '2018/01/01',
role: 'Guest',
status: 'Pending'
},
{
id: 1,
name: 'Samppa Nori',
registered: '2018/01/01',
role: 'Member',
status: 'Active'
}
]
<BootstrapTable data={this.data} version="4" striped hover pagination search options={this.options}>
<TableHeaderColumn dataField="name" dataSort>Name</TableHeaderColumn>
<TableHeaderColumn isKey dataField="email">Email</TableHeaderColumn>
<TableHeaderColumn dataField="age" dataSort>Age</TableHeaderColumn>
<TableHeaderColumn dataField="city" dataSort>City</TableHeaderColumn>
</BootstrapTable>
当用户单击名称列时,它应该重定向到 user/:id,所以我想动态地将 ahref 添加到名称列中。 可以帮助将 href 添加到反应引导表
只需将 dataFormat 添加到您的列中即可解决您的问题。此处单元格包含列数据,行包含总计行数据。
CellFormatter(cell, row) {
return (<div><a href={cell+"/"+row.age}>{cell}</a></div>);
}
<BootstrapTable data={this.table} version="4" striped hover pagination search options={this.options}>
<TableHeaderColumn dataField="name" dataFormat={this.CellFormatter} dataSort>Name</TableHeaderColumn>
<TableHeaderColumn isKey dataField="email">Email</TableHeaderColumn>
<TableHeaderColumn dataField="age" dataSort>Age</TableHeaderColumn>
<TableHeaderColumn dataField="city" dataSort>City</TableHeaderColumn>
</BootstrapTable>