如何以编程方式设置单元格中文本的颜色

Question

是否可以通过编程方式设置单元格中文本的颜色？ 好吧，我的情况是我在数据网格中填写了一些数字。我想根据他们的价值观给他们上色。我有点迷失在这里，因为我没有找到自定义单个单元格的方法。我已经尝试过“rowRender”，但它并没有完成我的任务，因为它只为一行着色。我想要的是为单个单元格着色。 是否可以这样做。

Answer 1

是的，我们可以根据数据格式化列。请看下面的例子来了解如何实现，

import ReactDOM from "react-dom";
import React from "react";
import ReactDataGrid from "react-data-grid";
import "./styles.css";
class NameFormatter extends React.Component {
  render() {
    return (
      <span className={this.props.dependentValues.id === 1 ? "red" : "green"}>
        {this.props.value}
      </span>
    );
  }
}
let columns = [
  {
    key: "id",
    name: "Id",
    getRowMetaData: row => row
  },
  {
    key: "name",
    name: "Name",
    getRowMetaData: row => row,
    formatter: NameFormatter
  }
];
class App extends React.Component {
  constructor() {
    super();
    this.state = {
      data: [{ id: 1, name: "einsten" }, { id: 2, name: "newton" }]
    };
    this.rowGetter = this.rowGetter.bind(this);
    this.getSize = this.getSize.bind(this);
  }
  rowGetter(rowIndex) {
    let rows = this.getRows();
    return rows[rowIndex];
  }
  getRows() {
    return this.state.data;
  }
  getSize() {
    return this.getRows().length;
  }
  render() {
    return (
      <ReactDataGrid
        columns={columns}
        rowsCount={this.getSize()}
        rowGetter={this.rowGetter}
      />
    );
  }
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

为了自定义列我们需要编写一个格式化组件，这里Nameformatter是name列的格式化组件。我们可以通过this.props.value访问列值和元数据（其他列值）通过格式化程序组件中的this.props.dependentValues.nameoffield。

查看工作中的example