【React: 踩坑】Warning: Function components cannot be given refs. Attempts to access this ref will fail.

最新推荐文章于 2023-03-29 13:59:33 发布

是梦梦啊

最新推荐文章于 2023-03-29 13:59:33 发布

阅读量5.8k

点赞数

分类专栏： React 前端文章标签： react.js 前端 javascript

本文链接：https://blog.csdn.net/TanMengyi/article/details/126052921

版权

前端同时被 2 个专栏收录

66 篇文章

订阅专栏

React

15 篇文章

订阅专栏

本文讲述了在React中遇到的关于ref的问题，即在函数式组件上无法直接使用ref，导致无法聚焦到特定input元素。通过引入React.forwardRef并修改子组件，解决了无法通过ref获取组件实例的错误。此外，还提到了使用antd的input组件时，无需额外包装forwardRef即可直接使用ref。总结了ref不能直接用于函数组件的原因，并引用了官方解释，强调了在函数组件中使用ref需配合forwardRef的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

场景：有两个input框A、B，在A输入之后要进行校验，如果校验通过，自动聚焦到B的输入框……

做法：我就想得到了在B框上使用ref，通过调用xxxRef.current?.focus()来实现这个小场景

坑：但是坑来了

current拿不到值，打印出来是 undefined
控制台还报错：

Warning: Function components cannot be given refs. Attempts to access this ref will fail.

解决：需要套用forwardRef

子组件：
套了一层forwardRef，并且有了第二个参数ref，在input上传入了ref={ref}

const RgInput = forwardRef((props: IInputProps, ref: React.Ref<InputRef> | undefined) => {
    const { className, onlyText, ...rest } = props;
    return (
        <Input
            {...rest}
            className={classNames(
                'rg-input',
                { 'only-text': onlyText },
                className,
            )}
            ref={ref}
        ></Input>
    );
});

父组件：
employeeIdRef.current?.focus();就能正常使用了

const employeeIdRef = useRef<any>();
...
<RgInput size="large" placeholder="扫描员工号" ref={employeeIdRef} />

这里的RgInput是其他人封装过的input框，后来我换成了antd的input也可以直接使用ref，不需要去包一层forwardRef了

原因：
因为原来父组件通过 ref 获取了子组件的节点，子组件是函数式组件。
函数创建的子组件不能增加 refs. 官方推荐使用 React.forwardRef 解决。

概括：
ref不能使用在函数式组件上，因为函数式组件没有实例！要配合forwardRef使用!

官方解释：
1、转发 refs 到 DOM 组件
2、默认情况下，你不能在函数组件上使用 ref 属性，因为它们没有实例：