[[420985]]

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

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

父級組件傳遞數據

默認情況由父級組件傳遞數據到子級組件，我們將需要傳遞的數據，以屬性的方式，寫入組件中，如下：

import React from'react' 
// 引入單文件組件 
import PropsClass from'./PropsClass' 
import PropsFun from'./PropsFun' 
 
// 要傳遞的數據 
const toData = [ 
  {id:1,name:"劉能",age:66}, 
  {id:2,name:"廣坤",age:16} 
] 
 
functionApp() { 
  return ( 
    <div> 
      {/* 將需要傳遞的數據，以屬性的方式，寫入組件 */} 
      <PropsClasstoClass={toData}/> 
      <PropsFuntoFun={toData}/> 
    </div> 
  ) 
} 
 
exportdefault App 

這樣就完成了父級組件向子級組件傳遞數據的任務。

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

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

class 子級組件接受數據

class 組件中使用 this.props.xx 屬性名獲取父級組件傳遞的數據：

import React, { Component, Fragment } from'react' 
 
exportclass PropsClass extends Component { 
  render() { 
    return ( 
      <Fragment> 
        <h1>接受Props 數據</h1> 
        {console.log(this.props.toClass)}{/* 打印數據 */} 
        {/* 遍歷數據 */} 
        {this.props.toClass.map(item => 
        ( 
          <divkey={item.id}> 
            <span>{item.name}</span><span>{item.age}</span> 
          </div> 
        ) 
        )} 
      </Fragment> 
    ) 
  } 
} 
 
exportdefault PropsClass 

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

函數子級組件接受數據

函數組件中，Props 數據會默認傳入函數，因此需要在函數形參中獲取，直接使用即可。

import React, { Fragment } from'react' 
 
// 函數形參獲取Props 傳值 
functionPropsFun(props) { 
  return ( 
    <Fragment> 
      <h1>函數接受Props </h1> 
      {console.log(props.toFun)} 
      {/* 遍歷數據 */} 
      {props.toFun.map(item=> 
        ( 
        <divkey={item.id}> 
          <span>{item.name}</span> 
        </div> 
        ) 
      )} 
    </Fragment> 
  ) 
} 
 
exportdefault PropsFun 

前面我們學習了父級組件向不同的子級組件傳遞數據，以及子級組件如何接受數據并處理，而如果父級組件傳遞較為復雜的數據時，如何傳遞數據，如何在子組件中使用，就需要我們進一步學習了解。

父組件向子組件傳值 -解構傳值

父級組件傳遞數據

傳遞普通數據，前面我們已經接觸過了，如果要是傳遞的數據是數組或者對象，我們應該如何處理呢?

最直接的辦法就是在傳遞時，在父級組件中將數據先進行解構，因為解構出來的數據，正好就是符合組件 “屬性” 寫法的：

import React from'react' 
// 引入單文件組件 
import PropsClass from'./PropsClass' 
import PropsFun from'./PropsFun' 
 
// 要傳遞的數據 
const toData = [ 
  {id:1,name:"劉能",age:66}, 
  {id:2,name:"廣坤",age:16} 
] 
 
functionApp() { 
  return ( 
    <div> 
      {/* 結構數據并傳入*/} 
      <PropsClass{...toData[0]}/> 
      <PropsFun{...toData[1]}/> 
    </div> 
  ) 
} 
 
exportdefault App 

上面是解構傳參。而在子級組件中應用時，與普通的應用并沒有區(qū)別，按照解構好的對應格式進行接收就可以了。

下面我們分別展示類組件和函數組件中獲取解構傳參的方式。

class 子級組件接受數據

依然使用 props 獲取傳參。

import React, { Component, Fragment } from'react' 
 
exportclass PropsClass extends Component { 
 
  render() { 
    // 獲取傳入的解構數據 
    const {name,age} =this.props 
    return ( 
      <Fragment> 
        <h1>Class 接受Props 數據</h1> 
        {console.log(name,age,'--')}{/* 打印數據 */} 
 
      </Fragment> 
    ) 
  } 
} 
 
exportdefault PropsClass 

函數子級組件接受數據

依然使用函數形參獲取數據。

import React, { Fragment } from'react' 
 
// 函數形參獲取Props 傳值 (結構) 
functionPropsFun({ name, age }) { 
  return ( 
    <Fragment> 
      <h1>函數接受Props </h1> 
      fun 數據： 
      {console.log(age, name)} 
      <div> 
        <span>{name}</span> 
        <span>{age}</span> 
      </div> 
    </Fragment> 
  ) 
} 
 
exportdefault PropsFun 

設置默認值

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

父級組件可以傳入數據，也可以不傳入：

import React from'react' 
// 引入單文件組件 
import PropsClass from'./PropsClass' 
import PropsFun from'./PropsFun' 
 
functionApp() { 
  return ( 
    <div> 
      {/* 父級組件沒有傳值則使用子組件的默認值，傳遞則替換 */} 
      <PropsClassnames="llll"/> 
      <PropsFun/> 
    </div> 
  ) 
} 
 
exportdefault App 

類組件設置默認值

class 子組件中使用 static defaultProps 設置默認值，當然，我們依然需要從 this.props 中獲取。

import React, { Component, Fragment } from'react' 
 
exportclass PropsClass extends Component { 
 
  // 此時我們就設置了 props 的默認值， 
  // 如果父組件沒有傳遞數據，則默認使用 
  // 如果傳遞了數據，則替換默認值 
  static defaultProps = { 
    names:'西嶺老濕', 
    age:18 
  } 
 
 
  render() { 
    // 獲取組件傳入的數據，可能是默認值，也可能是傳入的數據 
    const {names,age} =this.props 
    return ( 
      <Fragment> 
        <h2>Class 組件</h2> 
        <p>{names}</p> 
        <p>{age}</p> 
      </Fragment> 
    ) 
  } 
} 
 
exportdefault PropsClass 

函數組件設置默認值

函數組件需要使用組件名 .defaultProps 設置一個對象作為默認值，依然使用形參獲取：

import React, { Fragment } from'react' 
 
// 函數形參獲取Props 傳值 (結構) 
functionPropsFun({ name, age }) { 
  return ( 
   <div> 
     <h2>函數組件</h2> 
     <p>{name}</p> 
     <p>{age}</p> 
   </div> 
  ) 
} 
 
// 函數組件需要使用組件名.defaultProps設置一個對象 
PropsFun.defaultProps= { 
  name:'西嶺', 
  age:16 
} 
 
exportdefault PropsFun 

如果不想在子組件的形參接收時解構，也可以直接獲取 props。

import React, { Fragment } from'react' 
 
// 函數形參獲取Props 傳值 (結構) 
functionPropsFun(props) { 
  return ( 
   <div> 
     <h2>函數組件</h2> 
     <p>{props.name}</p> 
     <p>{props.age}</p> 
   </div> 
  ) 
} 
 
// 函數組件需要使用組件名.defaultProps設置一個對象 
PropsFun.defaultProps= { 
  name:'西嶺', 
  age:16 
} 
 
exportdefault PropsFun 

向子組件傳遞 JSX

父級組件傳遞 JSX

在父級組件中，需要向子級組件傳遞 JSX ，需要將 jsx 寫在組件的雙標簽內。

import React from'react' 
// 引入單文件組件 
import PropsClass from'./PropsClass' 
import PropsFun from'./PropsFun' 
 
functionApp() { 
  return ( 
    <div> 
      <h1>我是App</h1> 
      {/* 需要傳遞 JSX ，寫在組件雙標簽內*/} 
      <PropsClass> 
        {/* 可以傳遞多個標簽*/} 
        <p>父級組件中傳入的JSX, p標簽，App-Class組件</p> 
        <span>父級組件中傳入的JSX,span標簽，App-Class組件</span> 
      </PropsClass> 
      <PropsFun/> 
    </div> 
  ) 
} 
 
exportdefault App 

class 子組件接收 JSX

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

import React, { Component, Fragment } from'react' 
exportclass PropsClass extends Component { 
  render() { 
 
    return ( 
      <Fragment> 
        <h2>Class 組件</h2> 
        {/* 接收 JSX ，可以接收多個*/} 
        {this.props.children} 
      </Fragment> 
    ) 
  } 
} 
 
exportdefault PropsClass 

函數子組件接收 JSX

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

import React, { Fragment } from'react' 
 
// 函數組件中獲取jsx ,可以直接使用 props 接收參數 
functionPropsFun(props) { 
  return ( 
   <div> 
     <h2>函數組件</h2> 
     <p>{props.name}</p> 
     <p>{props.age}</p> 
     {props.children} 
   </div> 
  ) 
} 
 
// 函數組件需要使用組件名.defaultProps設置一個對象 
PropsFun.defaultProps= { 
  name:'西嶺', 
  age:16 
} 
 
exportdefault PropsFun