[react] 请说说什么是useImperativeHandle？

Posted 2021-12-19 前端小歌谣

[react] 请说说什么是useImperativeHandle？

// useImperativeHandle 可以让你在使用 ref 时自定义暴露给父组件的实例值。
// useImperativeHandle 应当与 forwardRef 一起使用：

import React,  useImperativeHandle, forwardRef  from 'react'
import  useEffect  from 'react';
import  useRef  from 'react';
function FancyInput(props, ref) 
  const inputRef = useRef();
  useImperativeHandle(ref, () => (
    focus: () => 
      inputRef.current.focus();
    
  ));
  return (<input ref=inputRef />);

FancyInput = forwardRef(FancyInput);

const useImperativeHandleHook = () => 
  const ref = useRef()

  useEffect(() => 
    console.log(ref)
    ref.current.focus()
  )

  return (
    <FancyInput ref=ref/>
  )


export default useImperativeHandleHook

 我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，
但坚持一定很酷。欢迎大家一起讨论

主目录

与歌谣一起通关前端面试题