在react中，為了解決html標簽構建應用的不足，將公共的功能單獨抽離成一個文件作為一個組件，在使用的地方按需引入，既然是組件彼此調用，就會涉及到父子組件的通信，下面主要來總結簡單的組件通信。

1，項目準備

在開始組件通信前，先在components中新建兩個文件，News.js和Header.js，並在News.js中引用Header.js，然後在App.js中引入News.js。

App.js

Header.js

News.js

2，父組件給子組件傳值

要在子組件中獲取父組件傳遞的值，只需要兩步就可以了：

1. 在調用子組件的時候定義一個屬性 <Header msg=‘首頁‘></Header>
2. 子組件裏面 this.props.msg

根據這兩步，我們分別修改Header.js和News.js

Header.js

News.js

3，在子組件中調用父組件的方法

在子組件中使用父組件的方法，需要分成3步：

1. 在父組件中定義方法；
2. 在調用子組件的時候綁定該方法
3. 在子組件中使用該方法。

我們將上面的代碼稍作調整，在父組件Header.js中定義一個執行打印語句的方法

然後在調用子組件的時候，綁定這個方法

最後，在子組件News.js中的一個按鈕上添加點擊事件，通過點擊事件調用該方法。

4，在父組件中獲取子組件的數據和方法

想要在父組件中獲取子組件的數據和方法，可以先在父組件中獲取整個子組件實例，繼而再獲取實例和方法就可以了。

首先，在子組件Header.js中定義相關的方法和數據：

然後在父組件中調用子組件的時候指定ref的值 <Header ref=‘header‘></Header>，並通過this.refs.header 獲取整個子組件實例

當我們執行父組件的點擊事件時，就可以使用子組件的方法和數據了。

完整的父子組件代碼如下：

Header.js

import React,{Component} from ‘react‘
class Header extends Component{
    constructor(props){
        super(props);
        
 
this.state={
            title:"我是子組件的數據"
        }
    }
    childFun=()=>{
        console.log("我是子組件的方法");
        console.log(this.state.title)
    }
    render(){
        return(
            <div>
               <h3>我是子組件</h3>
            </div>
        )
    }

}
export default Header;

News.js

import React,{Component} from ‘react‘
import Header from ‘./Header‘
class News extends Component{
    constructor(props){
        super(props);
        this.state={
            title:‘我是父組件‘
        }
    }
    run=()=>{
        console.log(‘我是父組件方法‘)
    }
    getHeader=()=>{
        this.refs.header.childFun();
        this.setState({
            title:this.refs.header.state.title
        })
    }
    render(){
        return(
            <div>
                <h2>我是News.js，是一個父組件</h2>
                <Header ref=‘header‘/>
                <div>{this.state.title}</div>
                <button onClick={this.getHeader}>執行子組件的方法</button>
            </div>
        )
    }

}
export default News;

5，在子組件中獲取整個父組件

上面，通過在父組件中獲取整個子組件的實例，從而獲取了組件的數據和方法，其實，在子組件中，也可以獲取整個父組件的實例，從而獲取父組件的數據和方法。

首要，父組件中定義數據和方法，並在調用子組件的時候，定義一個屬性，傳入this，即當前組件。

然後在子組件中，可以直接使用這些數據和方法

當然了，這種情況下也可以很方便的將子組件的數據傳遞到父組件了，而不在需要通過在父組件中獲取整個子組件了。

react組件的數據傳遞