react经验5:访问子组件内容

应用场景

父级需要调用子组件的某函数

实现步骤

案例:创建自定义按钮

button.tsx

ts 复制代码
import { Ref, forwardRef, useImperativeHandle,ReactNode} from "react"
declare type ButtonProps = {
    /**按钮文字 */
    children?: ReactNode,
    onClick?: () => void
}
/**组件对外提供的可访问内容*/
export declare type ButtonInstance = {
	/**触发按钮点击事件*/
    forceClick: () => void;
}
/**自定义按钮组件 */
const Button = forwardRef((props: ButtonProps, ref: React.Ref<ButtonInstance | undefined>) => {
   function handleClick() {
   		alert('子组件的事件被触发')
        if (props.onClick) {
            props.onClick();
        }
    }
//声明可以被访问的内容
    useImperativeHandle(ref, () => {
        return {
           forceClick:handleClick
        }
    });

    return (
            <button  onClick={handleClick}>{props.children}</button>
    );
});
export default Button;

父组件中调用子组件的函数

parent.tsx

ts 复制代码
import Button from './button.tsx'
import {useState} from 'react'
const Parent=()=>{
	const [buttonInstance,setButtonInstance]=useState<ButtonInstance|null>()
	
	function handleParentClick(){
		buttonInstance?.forceClick()
	}

	return (
		<>
			<button onClick={handleParentClick}>父组件的原生按钮</button>
			<Button ref={setButtonInstance}>自定义的按钮组件</Button>
		</>
	)
}
export default Parent
相关推荐
技术与健康11 分钟前
【解读】Chrome 浏览器实验性功能全景
前端·chrome
Bald Monkey18 分钟前
【Element Plus】解决移动设备使用 el-menu 和 el-sub-menu 时,子菜单需要点击两次才会隐藏的问题
前端·elementui·vue·element plus
小小小小宇36 分钟前
PC和WebView白屏检测
前端
天天扭码1 小时前
ES6 Symbol 超详细教程:为什么它是避免对象属性冲突的终极方案?
前端·javascript·面试
小矮马1 小时前
React-组件和props
前端·javascript·react.js
懒羊羊我小弟1 小时前
React Router v7 从入门到精通指南
前端·react.js·前端框架
gaog2zh1 小时前
0803分页_加载更多-网络ajax请求2-react-仿低代码平台项目
react.js·ajax·分页·加载更多
DC...1 小时前
vue滑块组件设计与实现
前端·javascript·vue.js
Mars狐狸2 小时前
AI项目改用服务端组件实现对话?包体积减小50%!
前端·react.js
H5开发新纪元2 小时前
Vite 项目打包分析完整指南:从配置到优化
前端·vue.js