React 学习——useImperativeHandle，暴漏子组件中的方法

暴露子组件的方法：

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

const Input = forwardRef((props,propRef)=>{
  const sonRef = useRef(null);
  const focusHandle = () => {
    console.log('父组件调用子组件的方法');
    sonRef.current.focus();
  }
  // 暴露子组件的方法 ref对应的是传参的propRef
  useImperativeHandle(propRef,()=>{
    return {
      focusHandle
    }
  })
  return <input type="text" ref={sonRef} />
})

const App = () => {
 const inputRef = useRef(null);
//  调用子组件方法
 const showRef = () => {
  inputRef.current.focusHandle();
}
  return (
    <div className="home">
     <Input ref={inputRef} />
     <button onClick={showRef}>拿到子组件的方法</button>
    </div>
  )
}

export default App