[英]Alternating Background Color react-bootstrap-table
我正在使用react-bootstrap-table,並且嘗試替換背景顏色。 該文檔讓它有點不清楚,具體是什么類型的數據進入了條件呈現功能的實現,因此我無法收到正確的結果。 我究竟做錯了什么?
// Customization Function
function rowClassNameFormat(row, rowIdx) {
// row is whole row object
// rowIdx is index of row
return rowIdx % 2 === 0 ? 'backgroundColor: red' : 'backgroundColor: blue';
}
// Data
var products = [
{
id: '1',
name: 'P1',
price: '42'
},
{
id: '2',
name: 'P2',
price: '42'
},
{
id: '3',
name: 'P3',
price: '42'
},
];
// Component
class TrClassStringTable extends React.Component {
render() {
return (
<BootstrapTable data={ products } trClassName={this.rowClassNameFormat}>
<TableHeaderColumn dataField='id' isKey={ true }>Product ID</TableHeaderColumn>
<TableHeaderColumn dataField='name'>Product Name</TableHeaderColumn>
<TableHeaderColumn dataField='price'>Product Price</TableHeaderColumn>
</BootstrapTable>
);
}
}
您可以使用trStyle
而不是trClassName
定制內聯樣式。 內聯樣式還應該以對象形式而不是字符串形式返回。
例
function rowStyleFormat(row, rowIdx) {
return { backgroundColor: rowIdx % 2 === 0 ? 'red' : 'blue' };
}
class TrClassStringTable extends React.Component {
render() {
return (
<BootstrapTable data={ products } trStyle={rowStyleFormat}>
<TableHeaderColumn dataField='id' isKey={ true }>Product ID</TableHeaderColumn>
<TableHeaderColumn dataField='name'>Product Name</TableHeaderColumn>
<TableHeaderColumn dataField='price'>Product Price</TableHeaderColumn>
</BootstrapTable>
);
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.