[[422977]]

本文轉(zhuǎn)載自微信公眾號(hào)「勾勾的前端世界」，作者西嶺 。轉(zhuǎn)載本文請(qǐng)聯(lián)系勾勾的前端世界公眾號(hào)。

截至到目前，我們已經(jīng)掌握了組件的概念、組件的傳值、以及組件狀態(tài)的相關(guān)內(nèi)容。有興趣的寶子可以翻看俺之前發(fā)布的內(nèi)容，筆芯。

你應(yīng)該發(fā)現(xiàn)了，我們學(xué)習(xí) React ，除了環(huán)境搭建和不多的 JSX 語(yǔ)法外，極大的篇幅都在學(xué)習(xí) React 中的數(shù)據(jù)流管理。

但是，我們?cè)谇懊鎸W(xué)習(xí)組件傳值時(shí)，一直都是將值從父級(jí)組件傳入子級(jí)組件中，從來(lái)沒(méi)有將子級(jí)組件的值傳入到父級(jí)組件，也沒(méi)有在多個(gè)兄弟組件間傳值。

而根據(jù)單向數(shù)據(jù)流的內(nèi)容推測(cè)，我們也不敢確定數(shù)據(jù)是否可以從子組件傳入父級(jí)組件。

為什么沒(méi)有在之前就說(shuō)呢?因?yàn)槲覀兊幕A(chǔ)知識(shí)掌握的還不夠，現(xiàn)在學(xué)完組件狀態(tài)，就可以了，那到底應(yīng)該怎么做呢?

組件數(shù)據(jù)傳遞

子組件向父組件傳值

我們先來(lái)看子級(jí)組件如何向父級(jí)組件傳遞數(shù)據(jù)：其本質(zhì)上就是使用回調(diào)函數(shù)。

具體怎么做呢?

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

父組件：

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> 
        {/* 將父級(jí)組件中的函數(shù)，以 Props 的方式傳入子級(jí)組件 */} 
        {/* 子級(jí)組件調(diào)用函數(shù)，以回調(diào)函數(shù)的方式將子組件的值傳回給父級(jí)組件 */} 
        <States fun={this.callBack} /> 
      </div> 
    ) 
  } 
} 
 
export default App 

子組件：

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

父級(jí)組件向子級(jí)組件通信，我們使用的是 Props 屬性，子級(jí)組件向父級(jí)組件通信則是結(jié)合了 Props 和回調(diào)函數(shù)進(jìn)行實(shí)現(xiàn)的，集合這兩點(diǎn)，我們就可以實(shí)現(xiàn)兄弟組件的通信了。

兄弟組件通信

兄弟組件的通信原理其實(shí)也很簡(jiǎn)單，就是使用回調(diào)函數(shù)的方式，先將數(shù)據(jù)傳入父級(jí)組件，再由父級(jí)組件使用 Props 的方式將數(shù)據(jù)傳入子級(jí)組件，如下圖所示：

而具體代碼的實(shí)現(xiàn)，并沒(méi)有什么新的知識(shí)點(diǎn)內(nèi)容，無(wú)非就是兩者結(jié)合一下而已：

我們?cè)诟讣?jí)組件中，引入子級(jí)組件的內(nèi)容，然后將函數(shù)傳入數(shù)據(jù)來(lái)源的子級(jí)組件，同樣使用 Props 再將數(shù)據(jù)傳入另一個(gè)組件中。

父級(jí)組件的代碼如下：

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 

接著我們看數(shù)據(jù)來(lái)源組件中，通過(guò) Props 獲取回調(diào)函數(shù)，調(diào)用并傳入數(shù)據(jù)：

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

然后再接收數(shù)據(jù)的子組件中，獲取數(shù)據(jù)：

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 

總結(jié)

子組件向父級(jí)組件傳值就是簡(jiǎn)單的回調(diào)函數(shù)，并沒(méi)有復(fù)雜的手法。，而利用回調(diào)函數(shù)和 Props 也可以輕松的實(shí)現(xiàn)兄弟組件間的數(shù)據(jù)傳遞，至此，我們利用 Props 完成了對(duì) React 數(shù)據(jù)流管理的所有內(nèi)容的學(xué)習(xí)。

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