具有功能組件的 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 的 React 組件頁面，“如果您希望覆蓋此 div 的樣式，您可以提供 ag-react-container class 的實現，或通過 React 組件上的 getReactContainerStyle 或 getReactContainerClasses 回調：”

我 go 如何使用功能組件創建自定義工具提示？ 我不確定我將如何提供 getReactContainerClasses 回調的實現。

Answer 1

您將無法在功能組件中使用公共函數getReactContainerClasses ，您需要編寫一個類組件。 如果你想寫一個函數式組件，只需直接在容器 DOM 元素上設置 CSS 類，類似於他們的 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

Answer 2

您可以使用帶有useImperativeHandle掛鈎的 React Hooks 公開 function。

export const Component = forwardRef((props: ComponentParams, ref: any) => {

 useImperativeHandle(ref, () => {
    return {
      getReactContainerClasses() {
        return ['grid-container'];
      },
    };
  });
}