react 父组件调子组件的方法

山有木兮木有枝，心悦君兮君不知。

我的github: 李大玄
我的私人博客: 李大玄
我的npm开源库: 李大玄
我的简书: 李大玄
我的CSDN: 李大玄
我的掘金: 李大玄

通过子组件传过来的组件实例. 父组件在去调用子组件的方法

父组件

import React, { Component } from 'react';
import Login from '@/components/Login';
import Logout from '@/components/Logout';
import { Button } from 'antd';
class Index extends Component {
    state = {
        tableList: [],
    isLogin: true,
    login: '',
    logout: '',
    };
  
  getSonFn = () => {
    this.state.login.getList();
  }
  // 通过子组件传过来的组件实例. 
  onRef = (val, ref) => {
    console.log(val, ref);
    switch (val) {
      case 'login':
        this.state.login = ref
        break;
      case 'logout':
        this.state.logout = ref
        break;
      default:
        break;
    }
  }
    
    render() {
        return (
            <div className="shadow-radius">
        
                <Button type="primary" onClick={ this.getSonFn } className="mr20">调子组件方法</Button>
                <Button type="primary" onClick={ this.chageData } className="mr20">子组件给父组件传值</Button>
                <Login onRef={this.onRef}/>
            <div/>
        );
    }
}

export default Index;

子组件

import React from 'react';
class Login extends React.Component {
  getList = () => {
    console.log('这是子组件');
  }
  componentWillMount() {
    this.props.onRef('login', this);
  }
  render() {
    return <div>login</div>
  }
}
export default Login;