子组件

import { forwardRef, useImperativeHandle } from 'react'// 定义子组件的 ref 类型
export interface ChildRef {childMethod: () => voidchildValue: string
}const Child = forwardRef<ChildRef>((props, ref) => {// 暴露给父组件的方法和属性useImperativeHandle(ref, () => ({childMethod: () => {console.log('子组件方法被调用')},childValue: 'child value'}))return <div>子组件</div>
})export default Child

父组件

import { useRef } from 'react'
import Child, { type ChildRef } from './Child'const Parent = () => {const childRef = useRef<ChildRef>(null)const handleClick = () => {// 调用子组件方法childRef.current?.childMethod()// 访问子组件属性console.log(childRef.current?.childValue)}return (<div><Child ref={childRef} /><button onClick={handleClick}>调用子组件方法</button></div>)
}

获取使用使用 Context（适用于多层级组件通信

context.tsimport { createContext } from 'react'interface ContextType {parentMethod: () => voidparentValue: string
}export const MyContext = createContext<ContextType>({parentMethod: () => {},parentValue: ''
})Parent.tsxconst Parent = () => {const contextValue = {parentMethod: () => {console.log('父组件方法被调用')},parentValue: 'parent value'}return (<MyContext.Provider value={contextValue}><Child /></MyContext.Provider>)
}Child.tsximport { useContext } from 'react'
import { MyContext } from './context'const Child = () => {const { parentMethod, parentValue } = useContext(MyContext)return (<div><button onClick={parentMethod}>调用父组件方法</button><div>父组件值: {parentValue}</div></div>)
}