带有功能组件的 Ag-grid 自定义工具提示答案

【问题标题】：Ag-grid custom tooltip with functional component带有功能组件的 Ag-grid 自定义工具提示
【发布时间】：2020-05-30 18:24:36
【问题描述】：

我正在查看 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 类的实现，或者通过 React 组件上的 getReactContainerStyle 或 getReactContainerClasses 回调： "

如何使用功能组件创建自定义工具提示？我不确定如何提供 getReactContainerClasses 回调的实现。

【问题讨论】：

标签： reactjs ag-grid ag-grid-react

【解决方案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

【讨论】：

【解决方案2】：

你可以使用带有 useImperativeHandle 钩子的 React Hooks 来拥有公共功能。

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

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

【讨论】：