forwardRef
作用:允许组件使用ref将一个DOM节点暴露给父组件
import { forwardRef, useRef } from "react"
// 子组件
const Son = forwardRef((props, ref) => {
return <input type="text" ref={ref} />
})
// 父组件
function App () {
const sonRef = useRef(null)
const showRef = () => {
console.log(sonRef)
sonRef.current.focus()
}
return (
<>
<Son ref={sonRef} />
<button onClick={showRef}>focus</button>
</>
)
}
export default App
useImperativeHandle
作用:如果我们并不想暴露子组件中的DOM而是想暴露子组件内部的方法