日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

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

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
React入門第四步：組件間的值傳遞Props

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

10年積累的成都網(wǎng)站制作、網(wǎng)站建設(shè)經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶對(duì)網(wǎng)站的新想法和需求。提供各種問題對(duì)應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先網(wǎng)站設(shè)計(jì)后付款的網(wǎng)站建設(shè)流程，更有新鄉(xiāng)縣免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

父組件向子組件傳值 -普通傳值

父級(jí)組件傳遞數(shù)據(jù)

默認(rèn)情況由父級(jí)組件傳遞數(shù)據(jù)到子級(jí)組件，我們將需要傳遞的數(shù)據(jù)，以屬性的方式，寫入組件中，如下：

 
 
 
    
  
  
  
  1. import React from'react' 
    2.   
  
  
  2. // 引入單文件組件 
    3.   
  
  
  3. import PropsClass from'./PropsClass' 
    4.   
  
  
  4. import PropsFun from'./PropsFun' 
    5.   
  
  
  5.  
    6.   
  
  
  6. // 要傳遞的數(shù)據(jù) 
    7.   
  
  
  7. const toData = [ 
    8.   
  
  
  8.   {id:1,name:"劉能",age:66}, 
    9.   
  
  
  9.   {id:2,name:"廣坤",age:16} 
    10.   
  
  
  10. ] 
    11.   
  
  
  11.  
    12.   
  
  
  12. functionApp() { 
    13.   
  
  
  13.   return ( 
    14.   
  
  
  14.     
     
    15.   
  
  
  15.       {/* 將需要傳遞的數(shù)據(jù)，以屬性的方式，寫入組件 */} 
    16.   
  
  
  16.        
    17.   
  
  
  17.        
    18.   
  
  
  18.     
 
  •   ) 
  • } 
  •  
  • exportdefault App 

    • 這樣就完成了父級(jí)組件向子級(jí)組件傳遞數(shù)據(jù)的任務(wù)。

    那么組件又分為函數(shù)組件和類組件。下面，我們分別展示類組件和函數(shù)組件是如何獲取傳遞進(jìn)來的數(shù)據(jù)的。

    我們先看類組件的獲取方式。

    class 子級(jí)組件接受數(shù)據(jù)

    class 組件中使用 this.props.xx 屬性名獲取父級(jí)組件傳遞的數(shù)據(jù)：

     
 
 
      
  
  
  
    1. import React, { Component, Fragment } from'react' 
      2.   
  
  
    2.  
      3.   
  
  
    3. exportclass PropsClass extends Component { 
      4.   
  
  
    4.   render() { 
      5.   
  
  
    5.     return ( 
      6.   
  
  
    6.        
      7.   
  
  
    7.         
      接受Props 數(shù)據(jù)
       
      8.   
  
  
    8.         {console.log(this.props.toClass)}{/* 打印數(shù)據(jù) */} 
      9.   
  
  
    9.         {/* 遍歷數(shù)據(jù) */} 
      10.   
  
  
    10.         {this.props.toClass.map(item => 
      11.   
  
  
    11.         ( 
      12.   
  
  
    12.            
      13.   
  
  
    13.             {item.name}{item.age} 
      14.   
  
  
    14.           
     
  •         ) 
  •         )} 
  •        
  •     ) 
  •   } 
  • } 
  •  
  • exportdefault PropsClass 

    • 類組件中 this 操作相對(duì)容易，因此，React 默認(rèn)會(huì)將父級(jí)組件的傳入的數(shù)據(jù)放入 props 屬性中。而在類組件中，如代碼所示，我們就可以直接使用 this.props 來獲取數(shù)據(jù)了。

    函數(shù)子級(jí)組件接受數(shù)據(jù)

    函數(shù)組件中，Props 數(shù)據(jù)會(huì)默認(rèn)傳入函數(shù)，因此需要在函數(shù)形參中獲取，直接使用即可。

     
 
 
      
  
  
  
    1. import React, { Fragment } from'react' 
      2.   
  
  
    2.  
      3.   
  
  
    3. // 函數(shù)形參獲取Props 傳值 
      4.   
  
  
    4. functionPropsFun(props) { 
      5.   
  
  
    5.   return ( 
      6.   
  
  
    6.      
      7.   
  
  
    7.       
      函數(shù)接受Props 
       
      8.   
  
  
    8.       {console.log(props.toFun)} 
      9.   
  
  
    9.       {/* 遍歷數(shù)據(jù) */} 
      10.   
  
  
    10.       {props.toFun.map(item=> 
      11.   
  
  
    11.         ( 
      12.   
  
  
    12.          
      13.   
  
  
    13.           {item.name} 
      14.   
  
  
    14.         
     
  •         ) 
  •       )} 
  •      
  •   ) 
  • } 
  •  
  • exportdefault PropsFun 

    • 前面我們學(xué)習(xí)了父級(jí)組件向不同的子級(jí)組件傳遞數(shù)據(jù)，以及子級(jí)組件如何接受數(shù)據(jù)并處理，而如果父級(jí)組件傳遞較為復(fù)雜的數(shù)據(jù)時(shí)，如何傳遞數(shù)據(jù)，如何在子組件中使用，就需要我們進(jìn)一步學(xué)習(xí)了解。

    父組件向子組件傳值 -解構(gòu)傳值

    父級(jí)組件傳遞數(shù)據(jù)

    傳遞普通數(shù)據(jù)，前面我們已經(jīng)接觸過了，如果要是傳遞的數(shù)據(jù)是數(shù)組或者對(duì)象，我們應(yīng)該如何處理呢?

    最直接的辦法就是在傳遞時(shí)，在父級(jí)組件中將數(shù)據(jù)先進(jìn)行解構(gòu)，因?yàn)榻鈽?gòu)出來的數(shù)據(jù)，正好就是符合組件 “屬性” 寫法的：

     
 
 
      
  
  
  
    1. import React from'react' 
      2.   
  
  
    2. // 引入單文件組件 
      3.   
  
  
    3. import PropsClass from'./PropsClass' 
      4.   
  
  
    4. import PropsFun from'./PropsFun' 
      5.   
  
  
    5.  
      6.   
  
  
    6. // 要傳遞的數(shù)據(jù) 
      7.   
  
  
    7. const toData = [ 
      8.   
  
  
    8.   {id:1,name:"劉能",age:66}, 
      9.   
  
  
    9.   {id:2,name:"廣坤",age:16} 
      10.   
  
  
    10. ] 
      11.   
  
  
    11.  
      12.   
  
  
    12. functionApp() { 
      13.   
  
  
    13.   return ( 
      14.   
  
  
    14.     
       
      15.   
  
  
    15.       {/* 結(jié)構(gòu)數(shù)據(jù)并傳入*/} 
      16.   
  
  
    16.        
      17.   
  
  
    17.        
      18.   
  
  
    18.     
     
  •   ) 
  • } 
  •  
  • exportdefault App 

    • 上面是解構(gòu)傳參。而在子級(jí)組件中應(yīng)用時(shí)，與普通的應(yīng)用并沒有區(qū)別，按照解構(gòu)好的對(duì)應(yīng)格式進(jìn)行接收就可以了。

    下面我們分別展示類組件和函數(shù)組件中獲取解構(gòu)傳參的方式。

    class 子級(jí)組件接受數(shù)據(jù)

    依然使用 props 獲取傳參。

     
 
 
      
  
  
  
    1. import React, { Component, Fragment } from'react' 
      2.   
  
  
    2.  
      3.   
  
  
    3. exportclass PropsClass extends Component { 
      4.   
  
  
    4.  
      5.   
  
  
    5.   render() { 
      6.   
  
  
    6.     // 獲取傳入的解構(gòu)數(shù)據(jù) 
      7.   
  
  
    7.     const {name,age} =this.props 
      8.   
  
  
    8.     return ( 
      9.   
  
  
    9.        
      10.   
  
  
    10.         
      Class 接受Props 數(shù)據(jù)
       
      11.   
  
  
    11.         {console.log(name,age,'--')}{/* 打印數(shù)據(jù) */} 
      12.   
  
  
    12.  
      13.   
  
  
    13.        
      14.   
  
  
    14.     ) 
      15.   
  
  
    15.   } 
      16.   
  
  
    16. } 
      17.   
  
  
    17.  
      18.   
  
  
    18. exportdefault PropsClass 
      19.

    函數(shù)子級(jí)組件接受數(shù)據(jù)

    依然使用函數(shù)形參獲取數(shù)據(jù)。

     
 
 
      
  
  
  
    1. import React, { Fragment } from'react' 
      2.   
  
  
    2.  
      3.   
  
  
    3. // 函數(shù)形參獲取Props 傳值 (結(jié)構(gòu)) 
      4.   
  
  
    4. functionPropsFun({ name, age }) { 
      5.   
  
  
    5.   return ( 
      6.   
  
  
    6.      
      7.   
  
  
    7.       
      函數(shù)接受Props 
       
      8.   
  
  
    8.       fun 數(shù)據(jù)： 
      9.   
  
  
    9.       {console.log(age, name)} 
      10.   
  
  
    10.       
       
      11.   
  
  
    11.         {name} 
      12.   
  
  
    12.         {age} 
      13.   
  
  
    13.       
     
  •      
  •   ) 
  • } 
  •  
  • exportdefault PropsFun 

    • 設(shè)置默認(rèn)值

    在一定的條件下，父級(jí)組件即便沒有傳入數(shù)據(jù)，子組件依然需要展示相關(guān)內(nèi)容。那么此時(shí)，我們就可以在子組件中設(shè)置默認(rèn)值來填充，當(dāng)父級(jí)組件沒有傳入數(shù)據(jù)時(shí)，子組件使用默認(rèn)數(shù)據(jù)，而如果父級(jí)組件有數(shù)據(jù)傳入，則替換默認(rèn)值。

    父級(jí)組件可以傳入數(shù)據(jù)，也可以不傳入：

     
 
 
      
  
  
  
    1. import React from'react' 
      2.   
  
  
    2. // 引入單文件組件 
      3.   
  
  
    3. import PropsClass from'./PropsClass' 
      4.   
  
  
    4. import PropsFun from'./PropsFun' 
      5.   
  
  
    5.  
      6.   
  
  
    6. functionApp() { 
      7.   
  
  
    7.   return ( 
      8.   
  
  
    8.     
       
      9.   
  
  
    9.       {/* 父級(jí)組件沒有傳值則使用子組件的默認(rèn)值，傳遞則替換 */} 
      10.   
  
  
    10.        
      11.   
  
  
    11.        
      12.   
  
  
    12.     
     
  •   ) 
  • } 
  •  
  • exportdefault App 

    • 類組件設(shè)置默認(rèn)值

    class 子組件中使用 static defaultProps 設(shè)置默認(rèn)值，當(dāng)然，我們依然需要從 this.props 中獲取。

     
 
 
      
  
  
  
    1. import React, { Component, Fragment } from'react' 
      2.   
  
  
    2.  
      3.   
  
  
    3. exportclass PropsClass extends Component { 
      4.   
  
  
    4.  
      5.   
  
  
    5.   // 此時(shí)我們就設(shè)置了 props 的默認(rèn)值， 
      6.   
  
  
    6.   // 如果父組件沒有傳遞數(shù)據(jù)，則默認(rèn)使用 
      7.   
  
  
    7.   // 如果傳遞了數(shù)據(jù)，則替換默認(rèn)值 
      8.   
  
  
    8.   static defaultProps = { 
      9.   
  
  
    9.     names:'西嶺老濕', 
      10.   
  
  
    10.     age:18 
      11.   
  
  
    11.   } 
      12.   
  
  
    12.  
      13.   
  
  
    13.  
      14.   
  
  
    14.   render() { 
      15.   
  
  
    15.     // 獲取組件傳入的數(shù)據(jù)，可能是默認(rèn)值，也可能是傳入的數(shù)據(jù) 
      16.   
  
  
    16.     const {names,age} =this.props 
      17.   
  
  
    17.     return ( 
      18.   
  
  
    18.        
      19.   
  
  
    19.         
      Class 組件
       
      20.   
  
  
    20.         
      {names}
       
      21.   
  
  
    21.         
      {age}
       
      22.   
  
  
    22.        
      23.   
  
  
    23.     ) 
      24.   
  
  
    24.   } 
      25.   
  
  
    25. } 
      26.   
  
  
    26.  
      27.   
  
  
    27. exportdefault PropsClass 
      28.

    函數(shù)組件設(shè)置默認(rèn)值

    函數(shù)組件需要使用組件名 .defaultProps 設(shè)置一個(gè)對(duì)象作為默認(rèn)值，依然使用形參獲?。?/p>

     
 
 
      
  
  
  
    1. import React, { Fragment } from'react' 
      2.   
  
  
    2.  
      3.   
  
  
    3. // 函數(shù)形參獲取Props 傳值 (結(jié)構(gòu)) 
      4.   
  
  
    4. functionPropsFun({ name, age }) { 
      5.   
  
  
    5.   return ( 
      6.   
  
  
    6.    
       
      7.   
  
  
    7.      
      函數(shù)組件
       
      8.   
  
  
    8.      
      {name}
       
      9.   
  
  
    9.      
      {age}
       
      10.   
  
  
    10.    
     
  •   ) 
  • } 
  •  
  • // 函數(shù)組件需要使用組件名.defaultProps設(shè)置一個(gè)對(duì)象 
  • PropsFun.defaultProps= { 
  •   name:'西嶺', 
  •   age:16 
  • } 
  •  
  • exportdefault PropsFun 

    • 如果不想在子組件的形參接收時(shí)解構(gòu)，也可以直接獲取 props。

     
 
 
      
  
  
  
    1. import React, { Fragment } from'react' 
      2.   
  
  
    2.  
      3.   
  
  
    3. // 函數(shù)形參獲取Props 傳值 (結(jié)構(gòu)) 
      4.   
  
  
    4. functionPropsFun(props) { 
      5.   
  
  
    5.   return ( 
      6.   
  
  
    6.    
       
      7.   
  
  
    7.      
      函數(shù)組件
       
      8.   
  
  
    8.      
      {props.name}
       
      9.   
  
  
    9.      
      {props.age}
       
      10.   
  
  
    10.    
     
  •   ) 
  • } 
  •  
  • // 函數(shù)組件需要使用組件名.defaultProps設(shè)置一個(gè)對(duì)象 
  • PropsFun.defaultProps= { 
  •   name:'西嶺', 
  •   age:16 
  • } 
  •  
  • exportdefault PropsFun 

    • 向子組件傳遞 JSX

    父級(jí)組件傳遞 JSX

    在父級(jí)組件中，需要向子級(jí)組件傳遞 JSX ，需要將 jsx 寫在組件的雙標(biāo)簽內(nèi)。

     
 
 
      
  
  
  
    1. import React from'react' 
      2.   
  
  
    2. // 引入單文件組件 
      3.   
  
  
    3. import PropsClass from'./PropsClass' 
      4.   
  
  
    4. import PropsFun from'./PropsFun' 
      5.   
  
  
    5.  
      6.   
  
  
    6. functionApp() { 
      7.   
  
  
    7.   return ( 
      8.   
  
  
    8.     
       
      9.   
  
  
    9.       
      我是App
       
      10.   
  
  
    10.       {/* 需要傳遞 JSX ，寫在組件雙標(biāo)簽內(nèi)*/} 
      11.   
  
  
    11.        
      12.   
  
  
    12.         {/* 可以傳遞多個(gè)標(biāo)簽*/} 
      13.   
  
  
    13.         
      父級(jí)組件中傳入的JSX, p標(biāo)簽，App-Class組件
       
      14.   
  
  
    14.         父級(jí)組件中傳入的JSX,span標(biāo)簽，App-Class組件 
      15.   
  
  
    15.        
      16.   
  
  
    16.        
      17.   
  
  
    17.     
     
  •   ) 
  • } 
  •  
  • exportdefault App 

    • class 子組件接收 JSX

    使用 this.props.children 可以接收父級(jí)組件中傳入的全部 JSX。

     
 
 
      
  
  
  
    1. import React, { Component, Fragment } from'react' 
      2.   
  
  
    2. exportclass PropsClass extends Component { 
      3.   
  
  
    3.   render() { 
      4.   
  
  
    4.  
      5.   
  
  
    5.     return ( 
      6.   
  
  
    6.        
      7.   
  
  
    7.         
      Class 組件
       
      8.   
  
  
    8.         {/* 接收 JSX ，可以接收多個(gè)*/} 
      9.   
  
  
    9.         {this.props.children} 
      10.   
  
  
    10.        
      11.   
  
  
    11.     ) 
      12.   
  
  
    12.   } 
      13.   
  
  
    13. } 
      14.   
  
  
    14.  
      15.   
  
  
    15. exportdefault PropsClass 
      16.

    函數(shù)子組件接收 JSX

    函數(shù)組件中獲取 jsx ,可以直接使用 props 接收參數(shù)。

     
 
 
      
  
  
  
    1. import React, { Fragment } from'react' 
      2.   
  
  
    2.  
      3.   
  
  
    3. // 函數(shù)組件中獲取jsx ,可以直接使用 props 接收參數(shù) 
      4.   
  
  
    4. functionPropsFun(props) { 
      5.   
  
  
    5.   return ( 
      6.   
  
  
    6.    
       
      7.   
  
  
    7.      
      函數(shù)組件
       
      8.   
  
  
    8.      
      {props.name}
       
      9.   
  
  
    9.      
      {props.age}
       
      10.   
  
  
    10.      {props.children} 
      11.   
  
  
    11.    
     
  •   ) 
  • } 
  •  
  • // 函數(shù)組件需要使用組件名.defaultProps設(shè)置一個(gè)對(duì)象 
  • PropsFun.defaultProps= { 
  •   name:'西嶺', 
  •   age:16 
  • } 
  •  
  • exportdefault PropsFun 

    • 網(wǎng)站名稱：React入門第四步：組件間的值傳遞Props
    轉(zhuǎn)載注明：http://www.dlmjj.cn/article/dpcspse.html

    其他資訊