Как программно установить цвет текста в ячейке

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 в компоненте форматирования.

См. рабочий пример