日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問(wèn)題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
React 數(shù)據(jù)流管理：組件之間數(shù)據(jù)是如何傳遞的？

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

創(chuàng)新互聯(lián)公司-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比二道網(wǎng)站開(kāi)發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫(kù),直接使用。一站式二道網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋二道地區(qū)。費(fèi)用合理售后完善，十多年實(shí)體公司更值得信賴。

截至到目前，我們已經(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í)參。

父組件：

 
 
 
 
      
  
  
  
  1. import React, { Component } from 'react' 
    2.   
  
  
  
  2. import States from './States' 
    3.   
  
  
  
  3.  
    4.   
  
  
  
  4. export class App extends Component { 
    5.   
  
  
  
  5.   state = { 
    6.   
  
  
  
  6.     name:'lisi' 
    7.   
  
  
  
  7.   } 
    8.   
  
  
  
  8.  
    9.   
  
  
  
  9.   callBack = (req)=>{ 
    10.   
  
  
  
  10.     this.setState({name:req}) 
    11.   
  
  
  
  11.   } 
    12.   
  
  
  
  12.  
    13.   
  
  
  
  13.   render() { 
    14.   
  
  
  
  14.     return ( 
    15.   
  
  
  
  15.       
     
    16.   
  
  
  
  16.         
    APP
     
    17.   
  
  
  
  17.         
    {this.state.name}
     
    18.   
  
  
  
  18.         {/* 將父級(jí)組件中的函數(shù)，以 Props 的方式傳入子級(jí)組件 */} 
    19.   
  
  
  
  19.         {/* 子級(jí)組件調(diào)用函數(shù)，以回調(diào)函數(shù)的方式將子組件的值傳回給父級(jí)組件 */} 
    20.   
  
  
  
  20.          
    21.   
  
  
  
  21.       
 
  •     ) 
  •   } 
  • } 
  •  
  • export default App 

    • 子組件：

     
 
 
 
        
  
  
  
    1. import React, { Component } from 'react' 
      2.   
  
  
  
    2.  
      3.   
  
  
  
    3. export class States extends Component { 
      4.   
  
  
  
    4.   render() { 
      5.   
  
  
  
    5.     return ( 
      6.   
  
  
  
    6.       
       
      7.   
  
  
  
    7.         {/* 子組件使用 Props 接收父級(jí)組件傳入的函數(shù)并調(diào)用 */} 
      8.   
  
  
  
    8.         {/* 將需要傳入父級(jí)組件的值，以實(shí)參的方式傳入到函數(shù)調(diào)用 */} 
      9.   
  
  
  
    9.         {this.props.fun('xliling')}}>點(diǎn)我 
      10.   
  
  
  
    10.       
     
  •     ) 
  •   } 
  • } 
  •  
  • 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í)組件的代碼如下：

     
 
 
 
        
  
  
  
    1. import React, { Component } from 'react' 
      2.   
  
  
  
    2.  
      3.   
  
  
  
    3. import States from './States' 
      4.   
  
  
  
    4. import Brother from './Brother' 
      5.   
  
  
  
    5.  
      6.   
  
  
  
    6. export class App extends Component { 
      7.   
  
  
  
    7.   state = { 
      8.   
  
  
  
    8.     name:'lisi' 
      9.   
  
  
  
    9.   } 
      10.   
  
  
  
    10.  
      11.   
  
  
  
    11.   callBack = (req)=>{ 
      12.   
  
  
  
    12.     this.setState({name:req}) 
      13.   
  
  
  
    13.   } 
      14.   
  
  
  
    14.  
      15.   
  
  
  
    15.   render() { 
      16.   
  
  
  
    16.     return ( 
      17.   
  
  
  
    17.       
       
      18.   
  
  
  
    18.         
      APP
       
      19.   
  
  
  
    19.         
      {this.state.name}
       
      20.   
  
  
  
    20.          
      21.   
  
  
  
    21.          
      22.   
  
  
  
    22.       
     
  •     ) 
  •   } 
  • } 
  •  
  • export default App 

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

     
 
 
 
        
  
  
  
    1. import React, { Component } from 'react' 
      2.   
  
  
  
    2.  
      3.   
  
  
  
    3. export class States extends Component { 
      4.   
  
  
  
    4.   render() { 
      5.   
  
  
  
    5.     return ( 
      6.   
  
  
  
    6.       
       
      7.   
  
  
  
    7.         {this.props.fun('xliling')}}>點(diǎn)我 
      8.   
  
  
  
    8.       
     
  •     ) 
  •   } 
  • } 
  •  
  • export default States 

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

     
 
 
 
        
  
  
  
    1. import React, { Component } from 'react' 
      2.   
  
  
  
    2.  
      3.   
  
  
  
    3. export class Brother extends Component { 
      4.   
  
  
  
    4.   render() { 
      5.   
  
  
  
    5.     return ( 
      6.   
  
  
  
    6.       
       
      7.   
  
  
  
    7.         
      Brother 
       
      8.   
  
  
  
    8.         
      {this.props.fromApp}
       
      9.   
  
  
  
    9.       
     
  •     ) 
  •   } 
  • } 
  •  
  • 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)了，下周再更，嘻嘻(●'?'●)


    網(wǎng)頁(yè)標(biāo)題：React 數(shù)據(jù)流管理：組件之間數(shù)據(jù)是如何傳遞的？
    本文網(wǎng)址：http://www.5511xx.com/article/dhocgij.html