React父子組件通信

我做了個(gè)導(dǎo)航，調(diào)用了兩重子級(jí)組件，父級(jí)App組件里面的getkey參數(shù)要等于第2級(jí)Home子組件定義的menuKey的值[1]。該如何寫呢？（這是我刪除內(nèi)容后僅僅為了實(shí)現(xiàn)getkey等于menuKey值的內(nèi)容,為了方便看懂）

import React, { Component } from 'react';
import $ from 'jquery';
import logo from './logo.svg';
import './App.css';
import './style.less';
import Roster from './Roster.js';
import Schedule from './Schedule.js';
import { Switch, Route, Link } from 'react-router-dom';


class Main extends Component {//第1級(jí)子組件(路由導(dǎo)航)
  render() {
    return (
      <Switch>
        <Route exact path='/' component={Home} />
      </Switch>
    )
  }
}
class Home extends Component {//第2級(jí)子組件
  render() {
    const menuKey = [1];//第2級(jí)子組件定義的值，App父級(jí)組件要用這個(gè)值
    return (
      <div>
        <b>第2級(jí)子組件</b>
      </div>
    )
  }
}

class App extends Component {//導(dǎo)航和內(nèi)容組合App組件
  render() {
    return (
      <div>
        <p getkey={'第二級(jí)子組件定義的值menukey'}></p>
        <Main />
      </div>
    );
  }
}

export default App;

這是未精簡的代碼

import React, { Component } from 'react';
import $ from 'jquery';
import { Layout, Menu, Dropdown, Breadcrumb, Upload, Icon, Modal, Affix, Button, Steps, AutoComplete, Checkbox, DatePicker, message, Rate, Radio, Select, Carousel, Progress, Spin, BackTop } from 'antd';
import logo from './logo.svg';
import './App.css';
import './style.less';
import Roster from './Roster.js';
import Schedule from './Schedule.js';
import { Switch, Route, Link } from 'react-router-dom';
const { Header, Content, Footer, Sider } = Layout;
const SubMenu = Menu.SubMenu;

class Main extends Component {//第1級(jí)子組件
  render() {
    return (
      <Switch>
        <Route exact path='/' component={Home} />
        <Route path='/roster' component={Roster} />
        <Route path='/schedule' component={Schedule} />
      </Switch>
    )
  }
}
class Home extends Component {//第2級(jí)子組件
  render() {
    const menuKey = [1];//第2級(jí)子組件定義的值，App組件要用這個(gè)值
    return (
      <Content style={{ margin: '0 16px' }}>
        <Breadcrumb style={{ margin: '16px 0' }}>
          <Breadcrumb.Item>User</Breadcrumb.Item>
          <Breadcrumb.Item>Home</Breadcrumb.Item>
        </Breadcrumb>
        <div style={{ padding: 24, background: '#fff', minHeight: 360 }}>
          Home
        </div>
      </Content >
    )
  }
}

class App extends Component {//導(dǎo)航和內(nèi)容組合App組件
  render() {
    return (
      <Layout style={{ minHeight: '100vh' }}>
        <Sider collapsible>
          <Menu theme="dark" mode="inline" defaultSelectedKeys={'第二級(jí)子組件定義的值menukey'}>
            <Menu.Item key="1">
              <Link to='/'></Link>
              <Icon type="user" />
              <span>Home</span>
            </Menu.Item>
            <Menu.Item key="2">
              <Link to='/roster'></Link>
              <Icon type="video-camera" />
              <span>Roster</span>
            </Menu.Item>
            <Menu.Item key="3">
              <Link to='/schedule'></Link>
              <Icon type="upload" />
              <span>Schedule</span>
            </Menu.Item>
          </Menu>
        </Sider>
        <Layout>
          <Header style={{ background: '#fff', padding: 0 }} />
          {/* Main組件 */}
          <Main menuKey={this.menuKey} />
          <Footer style={{ textAlign: 'center' }}>
            底部
          </Footer>
        </Layout>
        <BackTop />
      </Layout>
    );
  }
}

export default App;