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

晨光熹微fd

已于 2022-08-22 15:14:49 修改

阅读量524

点赞数

文章标签： react.js javascript 前端

于 2022-08-07 19:17:11 首次发布

本文链接：https://blog.csdn.net/yangyanqin2545/article/details/126215578

版权

本文介绍了如何在React中使用React.useImperativeHandle和React.forwardRef配合，让父组件能够直接操作子组件的方法和状态。通过实例演示了如何创建一个父组件，通过ref引用子组件，并实现状态的交互。

摘要由CSDN通过智能技术生成

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);