React函数式组件使用ref
ref
- ref的作用
- ref用于获取DOM元素或子组件实例。
useRef
useRef作用
- useRef用于返回一个可变的ref对象。这个refduix的current属性被初始化为useRef传入的参数initialValue。
- useRef返回的ref对象在整个生命周期中保持不变。(意思是这个ref对象的地址一直不会变)。
- ref对象变化不会触发视图更新。(但是当有state改变时,ref对象的变化也会显示在视图上)。
- 获取的DOM实例将会储存在current属性。(current属性指向DOM实例)
useRef使用
在普通DOM元素上使用
const app: React.FC = () => { const element = useRef(null); return ( <> <input ref={element}></input> <button onClick={() => {element.current.focus()}}>click</button> </> ) }
在上面的例子中,我们先使用useRef创建了一个ref对象,并且将这个ref对象的current属性初始化为null,再将elemnet这个ref对象赋给普通DOM元素的ref属性。
在组件上使用
const parent: React.FC = () => { const childRef = useRef(null); return ( <> <Child ref={childRef}> </> ) }
这样还是拿不到子组件的实例,还需要使用forwaRef。
forwordRef用在子组件中。(这里的forward是转发的意思,也就是将子组件中想要的DOM元素转发给父组件中使用)。
const Child: React.FC = forwardRef((props,ref) => { return ( <div> <input type="text" ref={ref}/> </div> ) })
上面的例子中使用forwardRef将Child函数式组件包起来,并将传入的第二个参数ref挂在想要获取的元素上。
(实际上在子组件中使用ref是为了获取子组件TSX中的某个DOM元素,直接挂在想要通过ref获取的DOM上)