使用next/dynamic导入AgGridReact组件时无法获取ref

当你用Next.js的dynamic导入AgGridReact并设置ssr: false时，ref失效的核心原因是：默认情况下，Next.js的dynamic组件不会将ref转发给内部的目标组件，你拿到的ref其实是dynamic包装层的实例，而非真正的AgGridReact实例。

修复步骤 #

直接修改动态导入的配置，添加forwardRef: true选项即可：

const AgGridReact = dynamic(() => import('ag-grid-react').then((module) => module.AgGridReact), {
  ssr: false,
  forwardRef: true // 关键配置：开启ref转发
});

验证是否生效 #

你可以在组件中添加useEffect来确认ref是否正确获取到AgGrid实例：

import { useEffect, useRef } from 'react';
import dynamic from 'next/dynamic';

const AgGridReact = dynamic(() => import('ag-grid-react').then((module) => module.AgGridReact), {
  ssr: false,
  forwardRef: true
});

export default function YourGridComponent() {
  const gridRef = useRef(null); 

  useEffect(() => {
    if (gridRef.current) {
      // 这里可以正常调用AgGrid的API，比如获取选中行
      console.log('Grid API:', gridRef.current.api);
    }
  }, []);

  return (
    <AgGridReact
      ref={gridRef}
      rowData={rows}
      columnDefs={columns}
      defaultColDef={defaultColDef}
      animateRows={true}
      pagination={true}
      paginationPageSize={25}
    />
  );
}

修改后，gridRef就能正常指向AgGridReact的实例，和静态导入时的行为一致。

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