React - useImperativeHandle与forwardRef

// FancyInput组件作为子组件 函数组件
const FancyInput = React.forwardRef(（）=> (props, ref) {
  const inputRef = useRef();
  // 命令式的给`ref.current`赋值个对象
  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus()
    }
  }));
  return <input ref={inputRef} ... />
})

// Example组件作为父组件
function Example() {
  const fancyInputRef = useRef()
  const focus = () => {
    fancyInputRef.current.focus()
  }
  return (
    <><FancyInput ref={fancyInputRef} /></>
  )
}

 当子组件为类组件时

export default React.forwardRef((props, ref) => <Component
  {...props}
  innerRef={ref}
/>);
// 这个时候innerRef就变成了ref