正文从这开始~
总览
当我们试图在其对应的DOM元素被渲染之前访问其current
属性时,React的ref通常会返回undefined
或者null
。为了解决该问题,可以在useEffect
钩子中访问ref
,或者当事件触发时再访问ref
。
import {useRef, useEffect} from 'react';
export default function App() {
const ref = useRef();
console.log(ref.current);
// ? undefined hereuseEffect(() => {
const el2 = ref.current;
console.log(el2);
// ? element here
}, []);
return (Hello);
}
useEffect
useRef()
钩子可以传递一个初始值作为参数。该钩子返回一个可变的ref
对象,ref
对象上的current
属性被初始化为传递的参数。我们没有为
useRef
传递初始值,因此其current
属性设置为undefined
。如果我们将null
传递给钩子,如果立即访问其current
属性,将会得到null
。需要注意的是,我们必须访问当我们为元素传递ref
对象上的current
属性,以此来访问设置了ref
属性的div
元素。
ref
属性时,比如说,
,React将ref
对象的.current
属性设置为相应的DOM节点。我们使用
useEffect
钩子,是因为我们想要确保ref
已经设置在元素上,并且元素已经渲染到DOM上。如果我们尝试在组件中直接访问
ref
上的current
属性,我们会得到undefined,是因为 ref
还没有被设置,而且 div
元素还没有被渲染。事件 你也可以在事件处理函数中访问
ref
的current
属性。import {useRef, useEffect} from 'react';
export default function App() {
const ref = useRef();
console.log(ref.current);
// ? undefined hereuseEffect(() => {
const el2 = ref.current;
console.log(el2);
// ? element here
}, []);
const handleClick = () => {
console.log(ref.current);
// ? element here
};
return (Hello);
}
当用户点击按钮的时候,
ref
已经被设置好了,相应的元素已经被渲染到DOM中,所以我们能够访问它。总结 【React报错之ref返回undefined或null】可以在
useEffect
钩子中访问ref
,或者当事件触发时再访问ref
。也就是说,要确保元素已经渲染到DOM上。推荐阅读
- React报错之Property 'X' does not exist on type 'HTMLElement'
- React报错之Cannot find name
- React报错之Object is possibly null
- React|React UI组件库——如何快速实现antd的按需引入和自定义主题
- React|【React路由】编程式路由导航和withRouter的使用——push / replace
- React|React路由组件传参的三种方式——params、search、state
- React|【React组件】github搜索案例之 父子组件通信 (附源码)
- React|【React】React组件实例的三大属性之state,props,refs(你学废了吗)
- React|【ReactRouter5】路由的模糊匹配,重定向以及嵌套路由