react中React.useImperativeHandle()和React.forwardRef()的搭配使用

react中React.useImperativeHandle和React.forwardRef()的搭配使用

当父组件想要操作子组件方法或者数据的时候，可以使用此方式来进行

1、父组件代码

import RefChild from "./components/RefChild";
const App = () => {
	const refElement = useRef();
	const handleChange = () => {
		refElement.current.handleChildStatus(true);
	};
	return (
		<Suspense fallback={<div>数据正在加载中</div>}>
			{/* 现在有这么一个需求，父亲元素需要操作子元素中数据 */}
			<div>
				<RefChild ref={refElement} />
				<button onClick={handleChange}>点击改变子元素的状态</button>
			</div>
		</Suspense>
	);
};
export default App;

2、子组件代码

import React, { useState } from "react";
const RefChild = (props: any, ref: any) => {
	const [visible, setVisible] = useState<boolean>(false);
	React.useImperativeHandle(ref, () => {
		return {
			handleChildStatus() {
				setVisible(!visible);
			},
		};
	});
	return <div>{visible ? <>显示的数据</> : <>隐藏时候的显示</>}</div>;
};
export default React.forwardRef(RefChild);