父元件

import React from 'react'
import Header from './Header'
import Footer from './Footer'
class Father extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      title: '父元件'
    }
  }
  run = () => {
    alert('我是父元件的run方法')
  }
  getData = () => {
    alert(this.state.title)
  }
  // 獲取子元件傳過來的資料
  getChildData = (result) => {
    alert(result)
    this.setState({
      title: result
    })
  }
  // 父元件自動調動子元件的方法
  getFooter = () => {
    alert(this.refs.footer.state.title)
    this.refs.footer.run()
  }
  render () {
    return (
      <div>
        {/* 父子元件傳值：
父元件給子元件傳值
1.在呼叫子元件的時候定義一個屬性  <Header msg='首頁'></Header>
2.子元件裡面 this.props.msg
說明：父元件不僅可以給子元件傳值，還可以給子元件傳方法,以及把整個父元件傳給子元件。
父元件主動獲取子元件的資料
1、呼叫子元件的時候指定ref的值   <Header ref='header'></Header>
2、通過this.refs.header  獲取整個子元件例項 dom載入完成後獲取*/}


        {/* 將title傳遞給子組建 */}
        {/* 傳遞父元件的方法 */}
        {/* 將整個父元件傳遞過去 */}
        <Header title={this.state.title} run={this.run} father={this}></Header>
        {this.state.title}
        <hr />
        <button onClick={this.getFooter}>獲取整個子元件</button>
        <Footer ref='footer'></Footer>
      </div>
    )
  }
}
export default Father
 

子元件Header

import React from 'react'
class Header extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      title: '頭部元件'
    }
  }
  getFather = () => {
    this.props.father.getData()
  }
  render () {
    return (
      <div>
        {/* 父子元件傳值：
父元件給子元件傳值
1.在呼叫子元件的時候定義一個屬性  <Header msg='首頁'></Header>
2.子元件裡面 this.props.msg
說明：父元件不僅可以給子元件傳值，還可以給子元件傳方法,以及把整個父元件傳給子元件。
父元件主動獲取子元件的資料
1、呼叫子元件的時候指定ref的值   <Header ref='header'></Header>
2、通過this.refs.header  獲取整個子元件例項 */}

        {/* /接受父元件傳過來的title值 */}
        <h2>{this.props.title}</h2>
        <button onClick={this.props.run}>呼叫父元件的run方法</button>
        <button onClick={this.props.father.getData}>獲取整個父元件</button>
        <button onClick={this.getFather}>執行父元件的方法</button>
        <button onClick={this.props.father.getChildData.bind(this, '我是子元件傳遞過來的值')}>子元件傳遞父元件的值</button>
        {this.state.title}
      </div>
    )
  }
}
export default Header
 

子元件Footer

import React from 'react'
class Footer extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      title: '底部元件'
    }
  }
  getFather = () => {
    this.props.father.getData()
  }
  run = () => {
    alert('我是底部元件的run方法')
  }
  render () {
    return (
      <div>
        {this.state.title}
      </div>
    )
  }
}
export default Footer