useImperativeHandle函数

useImperativeHandle是React中的一个Hook，它能让你自定义由ref暴露出来的句柄。也就是自定义暴露出去的内容而不是直接把整个组件暴露出去。

1. 使用useImperativeHandle

改造MyInput组件，只对外提供focus()方法:

import { useRef, forwardRef, useImperativeHandle } from 'react'

const MyInput = forwardRef(function MyInput(props, ref) {
  const inputRef = useRef(null)
  useImperativeHandle(ref, () => {
    return {
      focus() {
        inputRef.current.focus()
      }
    }
  })
  return (
    <input type="text" ref={inputRef} />
  )
})

function App() {
  const myRef = useRef(null)
  const handleClick = ()=>{
    myRef.current.focus()
    myRef.current.style.background = 'red'
  }
  return (
    <div>
      <div>
        <button onClick={handleClick}>点击</button>
      </div>
      <MyInput ref={myRef} />
    </div>
  )
}

export default App

运行结果：
发现报错样式找不到。