-
在函数组件中获取真实的
dom
元素对象或者是组件对象。 -
使用步骤
1、导入
useRef
函数2、执行
useRef
函数并传入null
,返回值为一个对象,内部有一个current
属性存放拿到的dom
对象(组件实例)3、通过
ref
绑定要获取的元素或者组件 -
获取
dom
实例import { useEffect, useRef } from 'react' function App() { const divRef = useRef(null) useEffect(() => { console.log(divRef) },[]) return ( <div> <div ref={ divRef }>this is div</div> </div> ) } export default App
-
获取
组件
实例函数组件由于没有实例,不能使用
ref
获取,如果想获取组件实例,必须是类组件。import React, { useEffect, useRef } from 'react' // 类组件 class Sub extends React.Component { render () { return ( <div>子组件</div> ) } } // 函数组件不 useRef 获取,会报错 // function Sub () { // return ( // <div>子组件</div> // ) // } function App() { const divRef = useRef(null) useEffect(() => { console.log(divRef) },[]) return ( <div> <Sub ref={ divRef }>this is div</Sub> </div> ) } export default App
React useRef 详细使用
猜你喜欢
转载自blog.csdn.net/zz00008888/article/details/129972931
今日推荐
周排行