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

应用场景

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

实现步骤

案例：创建自定义按钮
button.tsx

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

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