react 类暴露_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"exportdefaultclass ClassChild extends Component{

state={

index :0}//这个方法 可以被父组件获取到

childGet=()=>{return "this is classComponent methonds and data"+this.state.index

}

render(){return

ClassChildClassChildGet

}

}

//ClassParent.tsx 类父组件import React, { Component} from"react"import ClassChild from"./classChild"exportdefaultclass ClassParent extends Component{

classChildRef:ClassChild|null=null //初始化ref

//获取 class 类子组件 暴露的方法/属性

getClassChildFn(){//(this.classChildRef as ClassChild).childGet()

console.log("ClassParentGet--ClassChild",this.classChildRef?.childGet())

}

render(){return

class 父组件获取 class类子组件 的内部值

this.getClassChildFn()}>ClassParentGet--ClassChild

{this.classChildRef = ref}}>

}

}

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(null);

const [index,setIndex]= useState(0)

useImperativeHandle(ref,()=>{//这里return 的对象里面方法和属性可以被父组件调用

return{

toGet(){returnindex

},

divRef

}

})

const childGet= ()=>{

console.log("HooksChildGet",setIndex(index+1))

}return

HooksChild HooksChildGet

}

exportdefault forwardRef(HooksChild)

//ClassParent.tsx 类父组件

import React, { Component, createRef } from"react"import HooksChild from"./hooksChild"

//示例： class 父组件获取 hooks 子组件内部暴露的属性和方法 Ref

interface IChildRef {

toGet:()=>any

divRef:HTMLDivElement

}

exportdefaultclass ClassParent extends Component{

hooksChildRef= createRef() //初始化ref

//获取 hooks 子组件 暴露的方法/属性

getHooksChildFn(){//console.log("ClassParentGet--HooksChild",(this.hooksChildRef.current as IChildRed).toGet())console.log("ClassParentGet--HooksChild",this.hooksChildRef.current?.toGet())

}

render(){return

class 父组件获取 子组件hooks 的内部值

this.getHooksChildFn()}>ClassParentGet--HooksChild

}

}

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()

const getdataFn=()=>{

console.log(childRef)

console.log("HooksParent--HooksChild",childRef.current?.toGet())

}return

hooks父组件获取 子组件hooks 的内部值

HooksParent{`=>`}hooksChild :

}

exportdefault HooksParent

到此，基本总结完毕，如果有什么不对的，还望大神指正...............

原文：https://www.cnblogs.com/beyonds/p/13908373.html