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
相关推荐
风无雨21 分钟前
react antd 项目报错Warning: Each child in a list should have a unique “key“prop
前端·react.js·前端框架
人无远虑必有近忧!22 分钟前
video标签播放mp4格式视频只有声音没有图像的问题
前端·video
记得早睡~4 小时前
leetcode51-N皇后
javascript·算法·leetcode·typescript
安分小尧5 小时前
React 文件上传新玩法:Aliyun OSS 加持的智能上传组件
前端·react.js·前端框架
编程社区管理员5 小时前
React安装使用教程
前端·react.js·前端框架
拉不动的猪6 小时前
vue自定义指令的几个注意点
前端·javascript·vue.js
yanyu-yaya6 小时前
react redux的学习,单个reducer
前端·javascript·react.js
skywalk81636 小时前
OpenRouter开源的AI大模型路由工具,统一API调用
服务器·前端·人工智能·openrouter
Liudef066 小时前
deepseek v3-0324 Markdown 编辑器 HTML
前端·编辑器·html·deepseek
拉不动的猪6 小时前
uniapp与React Native/vue 的简单对比
前端·vue.js·面试