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

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

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

How to set color of the text in a cell programatically

react-data-grid