react+typescript 父组件主动获取子组件内暴露的方法或属性

Z时代
2024-01-10
分类：综合

react

react一般父子组件通讯都通过props, 如果向父组传值，也是由父组件通过props传一个方法到子组件来传值调用

本文主要是总结一下父组件(主动)获取子组件内暴露的方法或属性，react 组件一般主要分class 类组件和函数组件,

总结分分为三种情况

(1). class 父组件获取 class 子组件内部暴露的属性和方法

(2). class 父组件获取函数（hook）子组件内部暴露的属性和方法

(3.) 函数（hook) 父组件获取函数(hook)子组件内部暴露的属性和方法

1. 第一种：class 父组件获取 class 子组件

// ClassChild.tsx  类子组件
import React, { Component } from "react"
export default class ClassChild extends Component{
    state = {
        index : 0
    }
    // 这个方法 可以被父组件获取到
    childGet=()=>{
        return "this is classComponent methonds and  data"+this.state.index
    }
    render(){
           return <div>  ClassChild <button type="button">ClassChildGet</button></div>
    }
}

//ClassParent.tsx  类父组件
import React, { Component} from "react"
import ClassChild from "./classChild"
export default class ClassParent extends Component{
    classChildRef:ClassChild|null=null  //初始化ref 
     // 获取 class 类子组件 暴露的方法/属性
    getClassChildFn(){
        // (this.classChildRef as ClassChild).childGet()
        console.log("ClassParentGet--ClassChild",this.classChildRef?.childGet())
    }
    render(){
           return <div>
               <p>class 父组件获取  class类子组件 的内部值</p>
               <button type="button" onClick={()=>this.getClassChildFn()}>ClassParentGet--ClassChild</button>
               <ClassChild ref={(ref)=>{this.classChildRef = ref}}></ClassChild>
           </div>
    }
}

2. 第一种：class 父组件获取函数(hook)子组件

函数组件用到了 forwardRef() 和 useImperativeHandle()

//HooksChild.tsx 函数组件
import React,{forwardRef,useImperativeHandle, useRef, useState}  from "react"
interface Iprops {}
const HooksChild = (props:Iprops,ref: any)=>{
    const divRef = useRef<HTMLDivElement>(null);
    const [index,setIndex] = useState(0)
    useImperativeHandle(ref,()=>{
        // 这里return 的对象里面方法和属性可以被父组件调用
        return {
            toGet(){
                return index
            },
            divRef
        }
    })
    const childGet = ()=>{
        console.log("HooksChildGet",setIndex(index+1))
    }
    return <div ref={divRef}>HooksChild <button type="button" onClick={childGet}>HooksChildGet</button></div>
}
export default forwardRef(HooksChild)

//ClassParent.tsx 类父组件 
import React, { Component, createRef } from "react"
import HooksChild from "./hooksChild"
// 示例： class 父组件获取 hooks 子组件内部暴露的属性和方法 Ref
interface IChildRef {
    toGet:()=>any
    divRef:HTMLDivElement
}
export default class ClassParent extends Component{
    hooksChildRef = createRef<IChildRef>() //初始化ref 
    // 获取 hooks 子组件 暴露的方法/属性
    getHooksChildFn(){
        // console.log("ClassParentGet--HooksChild",(this.hooksChildRef.current as IChildRed).toGet())
        console.log("ClassParentGet--HooksChild",this.hooksChildRef.current?.toGet())
    }
    render(){
           return <div>
               <p>class 父组件获取 子组件hooks 的内部值</p>
               <button type="button" onClick={()=>this.getHooksChildFn()}>ClassParentGet--HooksChild</button>
               <HooksChild ref={this.hooksChildRef}></HooksChild>
           </div>
    }
}

3. 第三种 : 函数（hook) 父组件获取函数(hook)子组件

//HooksParent.tsx  函数父组件 
import React, { useRef } from "react"
import HooksChild from "./hooksChild"
export interface IChildRef {
    toGet:()=>any,
    divRef:HTMLDivElement
}
// 示例： hooks 父组件获取 hooks 子组件内部暴露的属性和方法 Ref
const HooksParent = ()=>{
    const childRef = useRef<IChildRef>()
    const getdataFn=()=>{
        console.log(childRef)
        console.log("HooksParent--HooksChild",childRef.current?.toGet())
    }
    return <div>
         <p> hooks父组件获取 子组件hooks 的内部值</p>
         <button type="button" onClick={getdataFn}>HooksParent{`=>`}hooksChild :</button>
         <HooksChild ref={childRef}/>
        </div>
}
export default HooksParent