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 上。