react+typescript 父組件主動獲取子組件內暴露的方法或屬性

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

 

到此，基本總結完畢，如果有什么不對的，還望大神指正...............