[[420985]]

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

依然使用 props 獲取傳參。

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

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

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

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

設(shè)置默認值

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

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

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

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

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

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

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

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

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

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

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

向子組件傳遞 JSX

父級組件傳遞 JSX

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

import React from'react' 
// 引入單文件組件 
import PropsClass from'./PropsClass' 
import PropsFun from'./PropsFun' 
 
functionApp() { 
  return ( 
    <div> 
      <h1>我是App</h1> 
      {/* 需要傳遞 JSX ，寫在組件雙標簽內(nèi)*/} 
      <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 

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

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

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