无法将工具提示锚定到cellRenderer中的项目

Question

我正在尝试使用带有cellRenderer的AgGrid框架在表中呈现div并将工具提示附加到此div。将呈现我正在使用的工具提示showMyTooltip的函数需要一个HTML元素作为锚点。它在附加到其他组件时有效，但由于某些原因，当我尝试连接到我的cellRenderer时，它不起作用。这是cellRenderer组件。当我记录this.anchor的值时，我得到“未定义。”任何人都可以发现我可能遗漏的内容吗？

export class MyCellRenderer extends Component {

  render() {
    const { showTooltip, shouldOpenTooltip, tooltipContent } = this.props.value;
    return
      (<div>
        <div ref={(el) => { this.anchor = el; }}>
          <div> SHOULD ANCHOR TO THIS </div>
        </div>
        {shouldOpenTooltip &&
          showMyTooltip({
            anchor: this.anchor,
            children: tooltipContent,
          })
        }
      </div>);
  }
}

export default MyCellRenderer;

Answer 1

我想默认情况下，单元格渲染器会呈现为字符串。下面是使用angular的单元格渲染器的示例，也许这将指导您使用angularjs？在下面的示例中，我创建了一个自定义单元格渲染器，并在ag-grid的col def中指定了渲染器的名称。

import { Component } from "@angular/core";
import { ICellRendererAngularComp } from "ag-grid-angular";

@Component({
    selector: 'tooltip-cell',
    template: `<ng-template #popTemplate>
                    <div class="tooltip-renderer">
                         Created By: {{creator}} <br/>
                         Created On: {{crDateTime | date:'short'}} <br/>
                         Revised By: {{revisor}} <br/>
                         Revised On: {{revDateTime | date:'short'}} <br/>
                    </div>
                </ng-template>
                <span [tooltip]="popTemplate" placement="left" container="body" triggers="mouseenter mouseleave dblclick">{{params.value}}</span>` })


export class ToolTipRenderer implements ICellRendererAngularComp {
    public params: any;
    public creator: any;
    public crDateTime: any;
    public revisor: any;
    public revDateTime: any;

    agInit(params: any): void {
        this.params = params;
        this.creator = params.data["Creator"];
        this.crDateTime = params.data["CrDate"];
        this.revisor = params.data["Revisor"];
        this.revDateTime = params.data["RevDate"];
    }
    refresh(): boolean {
        return false;
    }
}


var colDef1 = {
    cellRenderer: "tooltipRenderer",
    ...
}