- useRef 表示给标签创建一个标签,已方便拿到组件或者标签
- forwardRef 是一种通过组件引用 子组件引用ref的技术。对于应用者大部分开发没什么作用,但是对于那些重复使用的组件可能有用。比如input
实例一:input聚焦
ForwardRef.js
import FocusInput from "./ForwInput"
import React,{useEffect, useRef}from 'react';
let ForwardRef =() =>{
let ref = useRef()
useEffect(()=>{
const {current} = ref
debugger
current.focus()
},[])
return <div>
<p>focus</p>
<FocusInput ref={ref}></FocusInput>
</div>
}
export default ForwardRef
FocusInput.js
import React,{forwardRef} from 'react';
let FocusInput = forwardRef((props,ref)=>(
<input type="text" ref={ref}/>
))
export default FocusInput
上述代码中如果删除forwardRef,那么程序会出错,这是因为current为undefined
网友评论