react父组件调用子组件方法

实现父组件调用子组件方法：

基本思路：父组件可以通过props把自己的函数方法传递给子组件调用，那么子组件通过这个函数把自己的组件实例传回给父组件，父组件只需要保存这些实例便可以调用子组件的方法

父组件

import React, { Component } from 'react'
import {Layout } from 'antd'
import Friends from './friends'
import ChatWindow from "./chatWindow";
// 父组件
class Home extends Component{
    constructor (props) {
        super(props)
        this.state = { }
    }
    componentDidMount () {
    	// 等待子组件被挂载之后调用子组件方法
   		this.chatWindow.setChat ()
   		// 调用friends子组件中的方法
        this.friends.setFriends ()
    }
    // 获取子组件
    onRef (name, ref) {
        switch (name) {
            case 'chatWindow':
                this.chatWindow = ref
                break
            case 'friends':
                this.friends = ref
                break
            default:
                break
        }
    }
  
    render () {
        return(
            <Layout className='home'>
            // 好友列表子组件
                <Friends
                	 onRef={this.onRef.bind(this)}
                />
                // 聊天窗口子组件
                <ChatWindow
                            onRef={this.onRef.bind(this)}
                 />
            </Layout>
        )
    }
}
export default Home

子组件

friends子组件

import React, {Component} from 'react'

class friends extends Component{
    constructor (props) {
        super(props)
        this.state = {}
    }
    componentDidMount () {
    	// 调用父组件方法把当前实例传给父组件
        this.props.onRef('friends', this)
    }
    // 在父组件中调用的方法
    setFriends () {
        alert('子组件friends')
    }
    render () {
        return (
            <div className='friends'>friends</div>
        )
    }
}
export default friends

chatWindow子组件

import React, {Component} from 'react'

class chatWindow extends Component{
    constructor (props) {
        super(props)
        this.state = {}
    }
    componentDidMount () {
    	// 调用父组件方法把当前实例传给父组件
        this.props.onRef('chatWindow', this)
    }
    // 在父组件中调用的方法
    setFriends () {
        alert('子组件chatWindow')
    }
    render () {
        return (
            <div className='chatWindow'>chatWindow</div>
        )
    }
}
export default chatWindow

参考链接 https://blog.csdn.net/qq_35104586/article/details/81612127

赏

谢谢你请我吃糖果