美文网首页
useRef 和forwardRef

useRef 和forwardRef

作者: Viewwei | 来源:发表于2021-01-05 09:32 被阅读0次
  • 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

相关文章

网友评论

      本文标题:useRef 和forwardRef

      本文链接:https://www.haomeiwen.com/subject/wlrioktx.html