将ReactTooltip实现为自定义AG-Grid headerComponent时出错

时间:2018-07-19 11:40:36

标签: reactjs ag-grid

通过将全局标题组件添加到 frameworkComponents 对象中,我成功创建了一个全局标题组件,但是我需要每个列标题都具有唯一的实现。步骤似乎很简单:

1)创建了一个新的statusTooltip React组件,该组件旨在将鼠标悬停在网格标题标签上时实现ReactTooltip:

export class statusTooltip extends Component {
  constructor(props) {
    super(props)
  }

  render() {
    return (
      <div>
        <a data-tip data-for="test">Status</a>
        <ReactTooltip
          id="test"
          place="bottom"
          effect="solid"
          className="alertsGridHeaderTooltip"
          offset={{top: -15, left: -20}}>
          <p>The current state of the thing...</p>
        </ReactTooltip>
      </div>
    )
  }
}

2)在列定义中添加了 statusTooltip

export const columnDefs = [...
  {
    headerName: "Status",
    field: "status",
    cellClass: 'alertsGridStatusCell',
    width: 80,
    suppressResize: true,
    cellRenderer: tooltipRenderer,
    filterParams: {
      apply: true,
      clearButton: true,
    },
    headerComponentFramework: statusTooltip,
  },
  ...]

产生的错误:

componentResolver.js?1587:274 Error creating component headerComponent=>agColumnHeader
ComponentResolver.newAgGridComponent @ componentResolver.js?1587:274
headerWrapperComp.js?6894:125 Uncaught TypeError: Cannot read property 'then' of null
    at HeaderWrapperComp.appendHeaderComp (eval at <anonymous> (application.js:6811), <anonymous>:125:57)
    at HeaderWrapperComp.init (eval at <anonymous> (application.js:6811), <anonymous>:68:14)
    at eval (eval at <anonymous> (application.js:6241), <anonymous>:208:164)
    at Array.forEach (<anonymous>)
    at eval (eval at <anonymous> (application.js:6241), <anonymous>:208:109)
    at Array.forEach (<anonymous>)
    at Context.postConstruct (eval at <anonymous> (application.js:6241), <anonymous>:205:15)
    at Context.wireBeans (eval at <anonymous> (application.js:6241), <anonymous>:70:14)
    at Context.wireBean (eval at <anonymous> (application.js:6241), <anonymous>:59:14)
    at HeaderRowComp.createHeaderComp (eval at <anonymous> (application.js:6805), <anonymous>:209:22)
    at eval (eval at <anonymous> (application.js:6805), <anonymous>:180:36)
    at Array.forEach (<anonymous>)
    at HeaderRowComp.onVirtualColumnsChanged (eval at <anonymous> (application.js:6805), <anonymous>:156:22)
    at eval (eval at <anonymous> (application.js:6229), <anonymous>:126:17)
    at Array.forEach (<anonymous>)
    at Function.Utils.forEachSnapshotFirst (eval at <anonymous> (application.js:6247), <anonymous>:1064:23)
    at EventService.dispatchToListeners (eval at <anonymous> (application.js:6229), <anonymous>:121:23)
    at EventService.dispatchEvent (eval at <anonymous> (application.js:6229), <anonymous>:104:14)
    at ColumnController.checkDisplayedVirtualColumns (eval at <anonymous> (application.js:6301), <anonymous>:119:35)
    at ColumnController.setColumnDefs (eval at <anonymous> (application.js:6301), <anonymous>:1533:14)
    at Grid.setColumnsAndData (eval at <anonymous> (application.js:6919), <anonymous>:176:30)
    at new Grid (eval at <anonymous> (application.js:6919), <anonymous>:148:14)
    at AgGridReact.componentDidMount (eval at <anonymous> (application.js:6205), <anonymous>:70:9)
    at eval (eval at <anonymous> (application.js:2532), <anonymous>:264:25)
    at measureLifeCyclePerf (eval at <anonymous> (application.js:2532), <anonymous>:75:12)
    at eval (eval at <anonymous> (application.js:2532), <anonymous>:263:11)
    at CallbackQueue.notifyAll (eval at <anonymous> (application.js:2154), <anonymous>:76:22)
    at ReactReconcileTransaction.close (eval at <anonymous> (application.js:2688), <anonymous>:80:26)
    at ReactReconcileTransaction.closeAll (eval at <anonymous> (application.js:2220), <anonymous>:209:25)
    at ReactReconcileTransaction.perform (eval at <anonymous> (application.js:2220), <anonymous>:156:16)
    at batchedMountComponentIntoNode (eval at <anonymous> (application.js:2814), <anonymous>:126:15)
    at ReactDefaultBatchingStrategyTransaction.perform (eval at <anonymous> (application.js:2220), <anonymous>:143:20)
    at Object.batchedUpdates (eval at <anonymous> (application.js:2658), <anonymous>:62:26)
    at Object.batchedUpdates (eval at <anonymous> (application.js:2148), <anonymous>:97:27)
    at Object._renderNewRootComponent (eval at <anonymous> (application.js:2814), <anonymous>:319:18)
    at Object._renderSubtreeIntoContainer (eval at <anonymous> (application.js:2814), <anonymous>:401:32)
    at render (eval at <anonymous> (application.js:2814), <anonymous>:422:23)
    at Object.wrapAlertsDashboard [as InitAlertsDashboard] (eval at <anonymous> (application.js:2886), <anonymous>:259:24)
    at alerts:41

我在这里想念什么?有人能效法我吗?文档提供了影响所有标头的全局版本的示例。

0 个答案:

没有答案