Ag-grid反应中的重复工具提示渲染

时间:2020-08-14 11:30:23

标签: ag-grid ag-grid-react

我在我的react项目中使用了ag-grid。在针对特定列的ag-grid中,我使用了自定义工具提示组件。我的农业网格配置是

<AgGridReact
frameworkComponents={{
              actionsColumnRenderer: ActionsColumnRenderer,
              picklistTooltipComponent: OptionTooltipComponent,
            }}
columnDefs={[{
    field: 'optionsSize',
    headerName: 'Options',
    width: 100,
    tooltipField: 'options',
    tooltipComponent: 'picklistTooltipComponent',
  }]}
/>

这看起来与ag-grid中的文档非常相似。 OptionTooltipComponent的代码是

class OptionTooltipComponent extends React.Component {
  getReactContainerClasses() {
    return ['custom-tooltip'];
  }

  render() {
    return (
      <div className="custom-tooltip" style={{ backgroundColor: this.props.color || 'white' }}>
        <h3>Picklist Options</h3>
        <ul>
          {this.props.value && this.props.value.length ? (
            this.props.value.map((op, index) => <li key={index}>{op.name}</li>)
          ) : (
            <li>No picklist options</li>
          )}
        </ul>
      </div>
    );
  }
}

我现在面临的问题是一些提示始终存在,并且没有隐藏,正如您在video recorded中看到的那样

0 个答案:

没有答案