Пользовательская подсказка Ag-grid с функциональным компонентом

Question

Я смотрю на пример ag-Grid по созданию настраиваемой всплывающей подсказки.

import React, {Component} from 'react';

export default class CustomTooltip extends Component {
    getReactContainerClasses() {
        return ['custom-tooltip'];
    }

    render() {
        const data = this.props.api.getDisplayedRowAtIndex(this.props.rowIndex).data;
        return (
            <div className="custom-tooltip" style={{backgroundColor: this.props.color || 'white'}}>
                <p><span>{data.athlete}</span></p>
                <p><span>Country: </span> {data.country}</p>
                <p><span>Total: </span> {data.total}</p>
            </div>
        );
    }
}

Согласно странице компонента реакции ag-Grid: «Если вы хотите sh переопределить стиль этого div, вы может предоставить реализацию класса ag-реагировать-контейнера, или через обратные вызовы getReactContainerStyle или getReactContainerClasses для компонента React: "

Как бы я go о создании настраиваемой подсказки с использованием функционального компонента? Я не уверен, как бы я предоставил реализацию обратного вызова getReactContainerClasses.

Answer 1

Вы не сможете использовать функцию publi c getReactContainerClasses в функциональном компоненте, вам нужно написать компонент класса. Если вы хотите написать функциональный компонент, просто установите класс CSS непосредственно на элемент DOM контейнера, аналогично их примеру vanilla JS. Ниже приведен пример функциональной подсказки, который устанавливает класс custom-tooltip.

import React, {Component} from 'react';

export const FunctionalCustomTooltip = (props) => {
    props.reactContainer.classList.add('custom-tooltip');

    const data = props.api.getDisplayedRowAtIndex(props.rowIndex).data;
    return (
        <div className="custom-tooltip" style={{backgroundColor: props.color || 'white'}}>
            <p><span>{data.athlete}</span></p>
            <p><span>Country: </span> {data.country}</p>
            <p><span>Total: </span> {data.total}</p>
        </div>
    );
};

Полностью рабочий пример: https://plnkr.co/edit/WHEgtw0YVia1BVP4SVO8?p=preview