react 父组件调子组件的方法

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

前端QQ群: 981668406
在此附上我的QQ: 2489757828 有问题的话可以一同探讨
我的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;