React hooks之useImperativeHandle使用实例

useImperativeHandle

useImperativeHandle(ref, createHandle, [deps])

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

封装两个子组件：combine.js

import React, { useState } from 'react';
import Invite from "../invite"
import Login from "../login"

const openSwitch = React.forwardRef((props, ref) => {
  const [isInviteVisible, setIsInviteVisible] = useState(false);
  const [isModalVisible, setIsModalVisible] = useState(false);

  React.useImperativeHandle(
      ref,
      () => ({
        handleShowLogin,
        handleShowInvite
      })
  )

  const handleShowLogin = () => {
    setIsModalVisible(true);
    setIsInviteVisible(false);
  };

  const handleShowInvite = () => {
    setIsModalVisible(false);
    setIsInviteVisible(true);
  };

  return (
    <>
      <Invite   isInviteVisible={isInviteVisible}
                setIsInviteVisible={setIsInviteVisible}
                handleShowLogin={handleShowLogin} />
      <Login    isModalVisible={isModalVisible}
                setIsModalVisible={setIsModalVisible}
                handleShowInvite={handleShowInvite}/>
    </>
  );
})

export default openSwitch

父组件中引用：index.js

function Open (){
  const ref = useRef(null)
 
  const handleInvite = () =>{
    ref.current.handleShowInvite()
  }

  return (
    <div className="page-container">
	    <Button
	          key="btn"
	          type="primary"
	          onClick={handleInvite}
	        >
	        立即邀请
        </Button>
        <OpenSwitch ref={ref}/>
    </div>
  )
}

export default Open

正常情况下 ref 是不能挂在到函数组件上的，因为函数组件没有实例，但是 useImperativeHandle 为我们提供了一个类似实例的东西。它帮助我们通过 useImperativeHandle 的第 2 个参数，所返回的对象的内容挂载到 父组件的 ref.current 上。