React Hooks之useImperativeHandle


useImperativeHandle

useImperativeHandle(ref, createHandle, [deps])

useImperativeHandle 可以让你在使用 ref 时自定义暴露给父组件的实例值。在大多数情况下,应当避免使用 ref 这样的命令式代码。

useImperativeHandle 应当与 forwardRef 一起使用:

// Imperative 迫切的,命令式的
import { useRef, useEffect, forwardRef, useImperativeHandle } from 'react';
const FC = forwardRef((props, ref) => {
  const inputRef = useRef();
  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    }
  }));
  return ;
})

function App() {
  const ref = useRef()
  return 
}

export default App;