React基础之 forwardRef

使用场景：通过ref获取子组件内部input元素使其聚焦

如果父组件需要操作子组件的Dom，可以使用forwordRef来实现。通过父组件传递一个ref对象，子组件接收到这个对象之后与内部的ref先绑定，此时，父组件就能操作子组件的Dom了

import

{

forwardRef

,

memo

,

useCallback

,

useMemo

,

useReducer

,

useRef

,

useState

}

from

“react”

;

const

Son

=

forwardRef

((

props

,

ref

)

=>

{

return

<

input

type

=

“text”

ref

=

{

ref

}

</

input

})

function

App

() {

//

传给子组件的函数

const

sonRef

=

useRef

(

null

)

const

showRef

=()

=>

{

console

.

log

(

sonRef

);

sonRef

.

current

.

focus

()

}

return

(

<

div

className

=

“App”

<

Son

ref

=

{

sonRef

}

/>

<

button

onClick

=

{

showRef

}

focus

</

button

</

div

);

}

export default

App

;