[JavaScript知识库] 父组件（class）调用子组件（hooks）的方法

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> 父组件（class）调用子组件（hooks）的方法 -> 正文阅读

[JavaScript知识库]父组件（class）调用子组件（hooks）的方法

子组件

import React, { useImperativeHandle, forwardRef } from "react"
 
let Child = (props, ref) => {
  useImperativeHandle(ref, () => ({ // 暴露给父组件的方法
    getInfo,
    refreshInfo: () => {
    	console.log("子组件refreshInfo方法")
    }
  }))
  
  const getInfo = () => {
    console.log("子组件getInfo方法")
  }

  return (
    <View>子组件</View>
  )
}
Child = forwardRef(Child)
export default Child

父组件

import React, { Component } from 'react'
import Child form './Child'
export default class Parent extends Component {
 	super(props)
    this.state = {
    	childRef: {}
    }
	getChildCallback = () => {
		const {childRef} = this.state
		childRef.getInfo && childRef.getInfo()
		childRef.refreshInfo && childRef.refreshInfo()
	}
	childRefFunc= (ref) =>{
		this.setState = ({childRef: ref || this.state.childRef})
	}
	return (
		<View>
			<View onClick={this.getChildCallback.bind(this)}>触发子组件方法</View>
			<Child ref={this.childRefFunc} />
		</View>
	)
}