[[422977]]

本文轉載自微信公眾號「勾勾的前端世界」，作者西嶺 。轉載本文請聯系勾勾的前端世界公眾號。

截至到目前，我們已經掌握了組件的概念、組件的傳值、以及組件狀態的相關內容。有興趣的寶子可以翻看俺之前發布的內容，筆芯。

你應該發現了，我們學習 React ，除了環境搭建和不多的 JSX 語法外，極大的篇幅都在學習 React 中的數據流管理。

但是，我們在前面學習組件傳值時，一直都是將值從父級組件傳入子級組件中，從來沒有將子級組件的值傳入到父級組件，也沒有在多個兄弟組件間傳值。

而根據單向數據流的內容推測，我們也不敢確定數據是否可以從子組件傳入父級組件。

為什么沒有在之前就說呢?因為我們的基礎知識掌握的還不夠，現在學完組件狀態，就可以了，那到底應該怎么做呢?

組件數據傳遞

子組件向父組件傳值

我們先來看子級組件如何向父級組件傳遞數據：其本質上就是使用回調函數。

具體怎么做呢?

父級組件引入子級組件后，在 JSX 中依然使用 Props 的方式，將提前寫好的父級組件的函數，傳入子級組件，在子級組件中使用 this.props 接收傳入的函數并調用，在函數的調用中，將需要出入父級組件的值，傳入函數調用的實參。

父組件：

import React, { Component } from 'react' 
import States from './States' 
 
export class App extends Component { 
  state = { 
    name:'lisi' 
  } 
 
  callBack = (req)=>{ 
    this.setState({name:req}) 
  } 
 
  render() { 
    return ( 
      <div> 
        <h1>APP</h1> 
        <p>{this.state.name}</p> 
        {/* 將父級組件中的函數，以 Props 的方式傳入子級組件 */} 
        {/* 子級組件調用函數，以回調函數的方式將子組件的值傳回給父級組件 */} 
        <States fun={this.callBack} /> 
      </div> 
    ) 
  } 
} 
 
export default App 

子組件：

import React, { Component } from 'react' 
 
export class States extends Component { 
  render() { 
    return ( 
      <div> 
        {/* 子組件使用 Props 接收父級組件傳入的函數并調用 */} 
        {/* 將需要傳入父級組件的值，以實參的方式傳入到函數調用 */} 
        <button onClick={()=>{this.props.fun('xliling')}}>點我</button> 
      </div> 
    ) 
  } 
} 
 
export default States 

父級組件向子級組件通信，我們使用的是 Props 屬性，子級組件向父級組件通信則是結合了 Props 和回調函數進行實現的，集合這兩點，我們就可以實現兄弟組件的通信了。

兄弟組件通信

兄弟組件的通信原理其實也很簡單，就是使用回調函數的方式，先將數據傳入父級組件，再由父級組件使用 Props 的方式將數據傳入子級組件，如下圖所示：

而具體代碼的實現，并沒有什么新的知識點內容，無非就是兩者結合一下而已：

我們在父級組件中，引入子級組件的內容，然后將函數傳入數據來源的子級組件，同樣使用 Props 再將數據傳入另一個組件中。

父級組件的代碼如下：

import React, { Component } from 'react' 
 
import States from './States' 
import Brother from './Brother' 
 
export class App extends Component { 
  state = { 
    name:'lisi' 
  } 
 
  callBack = (req)=>{ 
    this.setState({name:req}) 
  } 
 
  render() { 
    return ( 
      <div> 
        <h1>APP</h1> 
        <p>{this.state.name}</p> 
        <States fun={this.callBack} /> 
        <Brother fromApp={this.state.name}></Brother> 
      </div> 
    ) 
  } 
} 
 
export default App 

接著我們看數據來源組件中，通過 Props 獲取回調函數，調用并傳入數據：

import React, { Component } from 'react' 
 
export class States extends Component { 
  render() { 
    return ( 
      <div> 
        <button onClick={()=>{this.props.fun('xliling')}}>點我</button> 
      </div> 
    ) 
  } 
} 
 
export default States 

然后再接收數據的子組件中，獲取數據：

import React, { Component } from 'react' 
 
export class Brother extends Component { 
  render() { 
    return ( 
      <div> 
        <h2>Brother </h2> 
        <p>{this.props.fromApp}</p> 
      </div> 
    ) 
  } 
} 
 
export default Brother 

總結

子組件向父級組件傳值就是簡單的回調函數，并沒有復雜的手法。，而利用回調函數和 Props 也可以輕松的實現兄弟組件間的數據傳遞，至此，我們利用 Props 完成了對 React 數據流管理的所有內容的學習。

而之前提到的關于 JSX 交互部分，用戶的頁面操作，都是由表單承接的。那么接下來的表單的處理就是重點了，下周再更，嘻嘻(●'?'●)