JZTXT

React - useImperativeHandle与forwardRef

发布时间 2023-07-10 10:37:38作者: 马铃薯头抽雪茄
// 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}
/>);
// 到时候 useImperativeHandle 就接收innerRef 当ref