时间戳

首页 > 解决方案 > 如何以编程方式设置单元格中文本的颜色

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

问题描述

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

标签： react-data-grid

解决方案

是的，我们可以根据数据格式化列。请参阅以下示例以了解如何实现它，

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。

请参阅工作示例

推荐阅读