AG Grid无数据时自定义noRowsOverlayComponent未渲染链接的问题

我用AG Grid展示表格，当表格无数据时，AG Grid会显示默认文本。我想把这个默认文本替换成可点击的链接，点击后打开表单。于是我用了noRowsOverlayComponent，但AG Grid没有渲染出锚点标签。以下是我写的自定义覆盖组件代码和在AgGridReact中的配置，请问问题出在哪？

自定义组件代码：

import React from 'react';

export type NoRowsLinkProps = {
  text?: string;
  actionFunction?: any;
};
function NoRowsLink(props: NoRowsLinkProps) {
  debugger;
  function dummy() {}
  return (
    <div>
      <a onClick={props.actionFunction ? props.actionFunction : dummy} style={{}}>
        {props.text ? props.text : 'No rows to show'}
      </a>
    </div>
  );
}

export default NoRowsLink;

AgGridReact配置：

<AgGridReact
...
noRowsOverlayComponent={NoRowsLink}
noRowsOverlayComponentParams={applicableNoRowsOverlayComponentParams}
...
/>

• 检查参数传递是否正确：确保applicableNoRowsOverlayComponentParams里正确包含text和actionFunction属性，AG Grid会把这些参数注入到自定义组件的props中。比如参数应该像这样：

  const applicableNoRowsOverlayComponentParams = {
    text: '点击添加新数据',
    actionFunction: () => { /* 这里写打开表单的逻辑 */ }
  };
  

• 适配AG Grid版本的参数接收方式：部分旧版本AG Grid要求自定义组件通过agInit方法接收参数，而不是直接用props。可以修改组件兼容这种情况：

  function NoRowsLink(props: NoRowsLinkProps) {
    const [componentParams, setComponentParams] = React.useState(props);
    
    React.useEffect(() => {
      if (props?.agInit) {
        props.agInit(componentParams);
      }
    }, [props]);
    
    const handleClick = componentParams.actionFunction || (() => {});
    const displayText = componentParams.text || '暂无数据，点击添加';
    
    return (
      <div style={{padding: '20px', textAlign: 'center'}}>
        <a 
          onClick={handleClick} 
          style={{cursor: 'pointer', color: '#1890ff', textDecoration: 'underline'}}
        >
          {displayText}
        </a>
      </div>
    );
  }
  

• 排查样式或DOM渲染问题：打开浏览器开发者工具，查看DOM结构，确认自定义组件的元素是否存在。如果存在但看不到，可能是被AG Grid的默认样式隐藏了，可以给锚点和外层div加上明确的样式（比如内边距、文字颜色、光标样式），确保它能正常显示。

• 确认组件注册无误：检查NoRowsLink组件是否正确导入，AgGridReact配置中的noRowsOverlayComponent有没有拼写错误，比如大小写或者单词写错。

内容的提问来源于stack exchange，提问作者Dattatreya Kugve