交替背景颜色反应-bootstrap-table

Question

我正在使用 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>
    );
  }
}

Answer 1

您可以使用 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>
    );
  }
}

交替背景颜色反应-bootstrap-table

Alternating Background Color react-bootstrap-table

javascript

reactjs

react-bootstrap-table