Question

我的HTML Table应用中有ReactJS，我想在那里为特定的单元格或行着色。我的数组处于状态，想要检查相邻行之间的差异，然后通过将它们着色为红色来显示这些差异。

class MainTable extends Component {
  constructor(props) {
    super(props);
    this.state = {
      results: []
    };
  }
  render() {
    const sorted = _.sortBy(this.state.results, ['ORIGIN', 'DATASTAMP']);
    return (
      <div>
        <div>
          <Table hover striped bordered responsive size="sm">
            <thead>
              <tr>
                <th>VERSION</th>
                <th>DATE</th>
                <th>ORIGIN</th>
              </tr>
            </thead>
            <tbody>
              {sorted.map(result =>
                <tr>
                  <td>{result.VERSION}</td>
                  <td>{result.DATASTAMP}</td>
                  <td>{result.ORIGIN}</td>
                </tr>
              )}
            </tbody>
          </Table>
        </div>
      </div>
    );
  }
}

我不知道如何做那样的事情。也许有点想法？抱歉，对于noobie问题，我是ReactJS的新人。

Answer 1

要标记某些行，您可以：

{sorted.map((result, index) =>
   <tr className={`item-${index}`}>
       <td>{result.VERSION}</td>
       <td>{result.DATASTAMP}</td>
       <td>{result.ORIGIN}</td>
   </tr>
)}

基本上，您首先需要一些标记元素的标准，而不是应用类或样式。有用的是classnames所以你可以这样做：

{sorted.map((result, index) =>
   <tr className={classnames({
     even: index % 2 == 0,
     odd: !(index % 2 == 0)
   })}>

这会将even或odd添加到<row>的类中，具体取决于列表中的索引。

我想只有两件事要记住：

元素样式需要对象：{ backgroundColor: #000 }和
css类需要添加为»className«property

Answer 2

您可以在数组的每个元素中添加一个标记，以指示是否需要设置单元格的背景颜色。

然后在渲染方法中使用它：

render() {
const sorted = _.sortBy(this.state.results, ['ORIGIN', 'DATASTAMP']);
return (
  <div>
    <div>
      <Table hover striped bordered responsive size="sm">
        <thead>
          <tr>
            <th>VERSION</th>
            <th>DATE</th>
            <th>ORIGIN</th>
          </tr>
        </thead>
        <tbody>
          {sorted.map(result =>
            <tr className={(result.colorFlag ? 'colored-background' : '')}>
              <td>{result.VERSION}</td>
              <td>{result.DATASTAMP}</td>
              <td>{result.ORIGIN}</td>
            </tr>
          )}
        </tbody>
      </Table>
    </div>
  </div>
);

当然，不要忘记创建CSS类

.colored-background {
    background-color: #BADA55;
}

Answer 3

您可以使用类似

的内容

<tr style={{'background-color': result.color}}>...</tr>

或

<tr style={{'background-color': shouldHighlight[key] ? 'red' : 'white'}}>...</tr>

显然，在第二种情况下，您需要在函数之前找到，哪些表行应该突出显示并将其存储在数组中。

此外，您需要以(result, key) => ...格式编写地图函数，或者您需要知道结果的ID。

如何为表中的特定单元格着色

3 个答案: