通过将全局标题组件添加到 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
我在这里想念什么?有人能效法我吗?文档提供了影响所有标头的全局版本的示例。