Nano Hash - криптовалюты, майнинг, программирование

ag-grid CellRenderer - как визуализировать, когда данные другой строки (props.data) изменяются?

Я хотел бы, чтобы ячейка отображалась определенным образом на основе других данных, доступных в объекте props.data, привязанном к строке. Но я не могу понять, как заставить ячейку повторно визуализироваться при изменении других данных.

У меня довольно простая структура данных, которую я пытаюсь отобразить в ag-сетке, в основном массив свойств, и у каждого есть имя, значение и флаг isLoading, который указывает, обновляется ли свойство (например, фоновое обновление может происходить, данные в ячейке сетки доступны только для чтения).

Я хочу, чтобы в сетке отображались столбцы имени и значения, и я хочу, чтобы в столбце значений отображался значок счетчика, если isLoading == true.
Я пытаюсь создать для этого настраиваемое средство визуализации ячеек, но ячейка повторно отображается только тогда, когда значение изменяется, а не при изменении флага isLoading.

В моем потоке кода для флага isLoading установлено значение true, затем значение обновляется. Это запускает метод рендеринга, и теперь в ячейке будет отображаться обновленное значение и счетчик загрузки. Затем для флага isLoading устанавливается значение false, но метод рендеринга больше не вызывается, поэтому в ячейке продолжает отображаться счетчик загрузки.

Итак, мой вопрос: как я могу заставить Cellrenderer реагировать на изменения в props.data, которые не относятся к полю, значение которого он показывает? В этом случае мне нужно повторно отрисовать ячейку при изменении флага props.data.isLoading.

Я использую ag-grid v17 с react и redux (и пытаюсь машинописный текст).
Мой код очень похож на приведенные здесь примеры: https://www.ag-grid.com/react-redux-integration-pt1/

Мой модуль визуализации ячеек был построен на основе модуля визуализации валюты в этом примере: https://www.ag-grid.com/javascript-grid-cell-rendering-components/#example-rendering-using-react-components

Примечание. У меня для deltaRowDataMode сетки установлено значение true, поэтому выполняется повторная визуализация только измененных данных.

Это мое определение столбца:

{
    colId: 'value',
    headerName: 'Value',
    field: 'value',  //the property's value on my data structure
    cellRendererFramework: MyCellRenderer
}

Это мой рендерер ячеек:

import React from 'react';
import { ICellRendererParams } from 'ag-grid';

interface RendererState {
    currentValue: string;
    isLoading: boolean;
}

export class MyCellRenderer extends React.Component<ICellRendererParams, RendererState> {
    constructor(props: ICellRendererParams) {
        super(props);
        this.state = { currentValue: props.data.value, isLoading: props.data.isLoading };
    }

    //refresh is only called when the value changes, not when params.data.isLoading changes, so render does not get called
    refresh(params: ICellRendererParams) {
        if (params.value !== this.state.currentValue) {
            this.setState({ currentValue: params.value });
        }
        if (params.data.isLoading !== this.state.isLoading) {
            this.setState({ isLoading: params.data.isLoading });
        }
        return true;
    }

    render() {
        var loadingStyle = {
            display: (this.state.isLoading) ? '' : 'none'
        };
        return (
            <div>
                {this.state.currentValue}
                <div className="pull-right">
                    <span className="fa fa-refresh fa-spin" style={loadingStyle}></span>&nbsp;
                </div>
            </div>
        );
    }

}

Это также может быть возможно с использованием класса или стилей ячейки, но есть и другие вещи, которые я хотел бы обрабатывать аналогичным образом, например, наличие средства визуализации ячеек с кнопкой и отключение этой кнопки, если isLoading является правда.

Обновление:
Здесь добавлен рабочий пример: https://react-owixbq.stackblitz.io/

16.03.2018

  • Можете ли вы сделать плункер или stackblitz с вашим кодом 17.03.2018
  • Извините за задержку - я добавил ссылку на пример stackblitz внизу сообщения. Мне не удалось отобразить тему сетки в stackblitz, но все же удалось воспроизвести проблему, хотя отображение было довольно уродливым! 20.03.2018
  • Привет, ты нашел решение для этого? 08.07.2018
  • @ Mohamed-Rihan Не совсем - я просто оставил deltaRowDataMode = false. К сожалению, мне пришлось перейти к чему-то другому, прежде чем я смог понять это. У меня тоже не было возможности попробовать реализовать componentWillReceiveProps. Пожалуйста, опубликуйте, если найдете решение! 09.07.2018

Ответы:


1

Вместо обновления состояния внутри refresh () попробуйте использовать componentWillReceiveProps.

    componentWillReceiveProps(nextProps){
        if(nextProps.data.yourField !== this.props.data.yourField){
            this.setState({ isLoading: false, currentValue: nextProps.data.yourField });
        }
    }
26.03.2018
Новые материалы

Кластеризация: более глубокий взгляд
Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..

Как написать эффективное резюме
Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..

Частный метод Python: улучшение инкапсуляции и безопасности
Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..

Как я автоматизирую тестирование с помощью Jest
Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..

Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..

Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..

Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..