React类组件使用ref出现函数组件ref警告且无法正常引用如何解决

你遇到的警告：

Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

触发的核心逻辑是：React检测到你给未使用React.forwardRef包裹的普通函数组件传递了ref属性。普通函数组件没有实例，且ref是React的特殊属性，默认不会透传给内部组件，因此会触发警告且你无法拿到预期的ref绑定。

哪怕你业务代码里写的是class组件，也大概率是以下两种场景导致的问题：

• 你的class组件被返回函数组件的高阶组件（HOC）包裹，你实际传递ref的对象是外层HOC返回的函数组件，而非你自己写的class组件
• 组件的引入/导出环节出错，你实际引入使用的是函数组件，而非预期的class组件

方案1：用React.forwardRef透传ref到内部class组件 #

如果你的class组件外层有HOC包装，修改HOC代码，用React.forwardRef包裹返回的函数组件，把ref透传给内部的class组件：

// 原错误HOC写法（返回普通函数组件，接收ref会触发警告）
const withCustomHOC = (WrappedComponent) => {
  return props => {
    // HOC逻辑处理
    return <WrappedComponent {...props} />
  }
}

// 修正后支持ref透传的HOC写法
const withCustomHOC = (WrappedComponent) => {
  const HOC = React.forwardRef((props, ref) => {
    // HOC逻辑处理
    return <WrappedComponent {...props} ref={ref} />
  })
  // 可选：设置displayName方便开发调试
  HOC.displayName = `withCustomHOC(${WrappedComponent.displayName || WrappedComponent.name})`
  return HOC
}

方案2：使用自定义属性名传递ref #

如果你不需要对外暴露HOC层，也可以避开ref这个特殊属性名，改用自定义属性传递ref，无需修改HOC的结构：

// 父组件调用时，用自定义属性名比如innerRef传递ref
<MyWrappedClassComponent innerRef={myRef} />

// HOC层透传自定义属性到内部class组件
const withCustomHOC = (WrappedComponent) => {
  return props => {
    return <WrappedComponent {...props} ref={props.innerRef} />
  }
}

你可以按以下步骤快速定位问题点：

• 打开React DevTools，找到你传递ref的组件，确认其组件类型是否为函数组件
• 注释掉组件外层的所有HOC/包装逻辑，直接导出原生class组件，观察警告是否消失，如果消失即可确认是包装层导致的问题
• 检查组件的引入路径，确认你引入的组件是你编写的class组件，而非其他同名的函数组件

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