NextJS中如何访问被withRouter包裹的组件Ref？

这个问题太常见了——withRouter作为高阶组件（HOC），默认不会把你传递的ref转发给被包裹的原始Child组件，你当前拿到的this.childRef.current其实是withRouter返回的组件实例，而非Child本身，自然调用不了getStatus方法。

下面给你两种可行的解决方案：

方案一：使用React.forwardRef转发Ref #

这是最直接的解决方式，通过forwardRef让HOC把ref传递给内部的Child组件：

修改Child组件的导出逻辑 #

import React, { Component, forwardRef } from 'react';
import { withRouter } from 'next/router';

class Child extends Component {
  getStatus() {
    return 'I am child!';
  }
  render() {
    return (<div>Child</div>);
  }
}

// 创建一个转发ref的组件，将外部传入的ref传递给Child
const ChildWithRouter = forwardRef((props, ref) => {
  return <Child {...props} ref={ref} />;
});

// 用withRouter包裹这个转发组件
export default withRouter(ChildWithRouter);

Parent组件无需修改 #

你的Parent组件代码保持原样即可，现在点击按钮就能正常打印I am child!了——因为this.childRef.current现在指向的是真正的Child组件实例。

方案二：改用函数组件+useRouter钩子（推荐） #

如果你可以重构组件，Next.js更推荐使用useRouter钩子替代withRouterHOC，这样不仅代码更简洁，也能避免ref转发的问题：

重构Child为函数组件 #

import React, { forwardRef, useImperativeHandle } from 'react';
import { useRouter } from 'next/router';

// 使用forwardRef和useImperativeHandle暴露方法
const Child = forwardRef((props, ref) => {
  const router = useRouter();

  // 暴露给父组件的方法
  const getStatus = () => {
    return 'I am child!';
  };

  // 用useImperativeHandle定义要暴露给ref的内容
  useImperativeHandle(ref, () => ({
    getStatus
  }));

  return <div>Child</div>;
});

export default Child;

Parent组件用法不变 #

同样，Parent组件的代码不需要修改，就能通过ref访问Child的getStatus方法。

补充说明 #

• 如果你使用的是较新版本的Next.js（13+ App Router），useRouter需要从next/navigation导入，而非next/router，注意区分。
• 尽量避免过度使用ref——如果只是需要传递数据或触发子组件方法，优先考虑通过props传递回调函数的方式，ref更多用于直接操作DOM或组件实例的特殊场景。

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