如何将refs传递给懒加载组件？ref返回null问题求助

问题核心在于Next.js的dynamic导入默认不会自动转发ref，必须显式开启对应配置才能让ref正常传递。

修复方案： #

1. 在动态导入组件的配置中添加forwardRef: true参数
2. 子组件已通过forwardRef包裹（你的代码这部分无需修改）

修改后的Home组件代码： #

'use client';
import dynamic from 'next/dynamic';
import { useRef } from 'react';
// 新增forwardRef: true配置，开启ref转发
const Component = dynamic(() => import('../components/Component'), {
  ssr: false,
  forwardRef: true,
});

export default function Home() {
  const ref = useRef(null);
  return <Component ref={ref} />;
}

子组件代码保持不变： #

import { forwardRef, useEffect } from 'react';
const Component = forwardRef((props, ref) => {
  useEffect(() => {
    console.log(ref); // 现在会输出预期的{current: null}
  }, []);
  return <h1>Practice</h1>;
});
export default Component; 

说明：Next.js的dynamic函数默认不会处理ref转发逻辑，只有在配置中声明forwardRef: true，它才会把父组件传递的ref转发给懒加载的目标组件，此时子组件通过forwardRef接收的ref才会是完整的Ref对象，而非null。

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