javascript - 动态更改引导表特定行的颜色

我在我的反应项目中使用引导表。我有一个表，它从这样的标签获取数据：

<Table className='flags-table' responsive hover>
    <thead>
    <tr>
        <th></th>
        <th> Time In</th>
        <th> Time Out</th>
        <th> Type</th>
        <th> Category</th>
    </tr>
    </thead>
    <tbody>
    {
        this.props.tag_fetch_reducer.tags.map((x, i) => (
            <tr key={i} onClick={this.handleRowClick.bind(this, i)}>
                <td>
                    <div className='red-box'></div>
                </td>
                <td> {this.secondsToHms(x.time)} </td>
                <td> {this.secondsToHms(x.stopTime)} </td>
                <td> {x.tagname} </td>
                <td contentEditable="false"> {x.category}</td>
            </tr>
        ))
    }
    </tbody>
</Table>

我想要的是：


我有一个名为tagIndex的变量，该变量在一定时间间隔后会更改其状态。因此tagIndex的值不断变化。该值可以从0到与表行的最后一个索引相同的值。现在我想要的是每当tagIndex达到某个值时，我想更改该索引的行的颜色。


例如：tagIndex为5，那么我应该看到第5行的颜色为黄色，而所有其他行的颜色为白色。然后，当tagIndex更改为8时，我希望黄色移至第8行，而所有其他行变为白色。我怎样才能做到这一点？

最佳答案

我无法确切地说出您使用的是哪个表（您的标记看起来与react-bootstrap-table有所不同）

但是，假设您仅对表使用普通引导程序。你可以做这样的事情。我创建了一个计时器，每秒钟更改一次在状态中选中的行。然后，我添加一个类（可以根据项目的结构使用内联样式），将背景设置为红色作为选定行。

https://jsfiddle.net/nacj5pt4/

var Hello = React.createClass({
  getInitialState: function() {
    return {
      selectedIndex: 0
    };
  },
  componentDidMount() {
    setInterval(() => this.setState({
      selectedIndex: (this.state.selectedIndex + 1) % this.props.data.length
    }), 1000)
  },
  render: function() {
    return (
      <table className='flags-table'>
        <thead>
        <tr>
            <th>Tagname</th>
            <th>Value</th>
        </tr>
        </thead>
        <tbody>
        {
            this.props.data.map((row, i) => (
                <tr className={this.state.selectedIndex === i ? 'selected' : ''} key={i}>
                    <td>
                      {row.tagName}
                    </td>
                    <td>
                      {row.value}
                    </td>
                </tr>
            ))
        }
        </tbody>
    </table>
   );
  }
});

const data = [
  {tagName: "category 1", value: 100},
  {tagName: "category 2", value: 100},
  {tagName: "category 3", value: 100},
  {tagName: "category 4", value: 100}
]


ReactDOM.render(
  <Hello data={data} />,
  document.getElementById('container')
);

.selected {
  background: red
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="container" />