Javascript 交替背景色反应引导表

我正在使用react引导表，并尝试交替背景色。文档中有点不清楚什么类型的数据进入了条件渲染函数的实现中，因此我无法收到正确的结果。我做错了什么

// 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>
    );
  }
}

//自定义功能
函数rowClassNameFormat（行，rowIdx）{
//行是整行对象
//rowIdx是行的索引
返回rowIdx%2==0？'backgroundColor:red'：'backgroundColor:blue'；
}
//资料
var乘积=[
{
id:'1'，
名称：“P1”，
价格：'42'
},
{
id:'2'，
名称：“P2”，
价格：'42'
},
{
id:'3'，
名称：“P3”，
价格：'42'
},
];
//组成部分
类TrClassStringTable扩展了React.Component{
render（）{
返回(
产品ID
品名
产品价格
);
}
}

您可以使用

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>
    );
  }
}

函数rowStyleFormat（行，rowIdx）{
返回{backgroundColor:rowIdx%2==0？'red'：'blue'}；
}
类TrClassStringTable扩展了React.Component{
render（）{
返回(
产品ID
品名
产品价格
);
}
}

trClassName

允许您自定义给定给每个

tr

的类。然后，您可以使用常规CSS对这些类进行任意样式设置。是的@Tholle，但我正在尝试使用“条件”格式，所以我还需要JS逻辑。另外，我更喜欢JS样式化实现是的，JS逻辑几乎可以像您已经拥有的代码一样，除了类名<代码>行IDX%2===0？'背景红'：'背景蓝'，然后设置它们的样式。我不确定你是否可以有条件地自定义内联样式。首先，我感谢你的回复！但是我运行了代码，它根本不会改变背景颜色。@RyanCocuzzo不客气。这太令人沮丧了。我用一个有效的代码沙盒更新了答案。你能看看你的代码是否不同吗？嗨@Thole，我尝试了这个解决方案，不幸的是

row

和

rowIdx

在

rowStyleFormat

中都没有定义，似乎

trStyle

没有正确地通过对象…@chutium这令人沮丧。您可以查看，看看您的代码是否与之匹配。