React 入門(mén)第四步：組件間的值傳遞 Props
回憶一下前三篇：
React 入門(mén)第二步：搞懂 JSX 語(yǔ)法
React 入門(mén)第三步：了解組件的概念及應(yīng)用
父組件向子組件傳值 -普通傳值
父級(jí)組件傳遞數(shù)據(jù)
默認(rèn)情況由父級(jí)組件傳遞數(shù)據(jù)到子級(jí)組件，我們將需要傳遞的數(shù)據(jù)，以屬性的方式，寫(xiě)入組件中，如下：
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ù)，以屬性的方式，寫(xiě)入組件 */}<PropsClasstoClass={toData}/><PropsFuntoFun={toData}/></div>)}exportdefault App
這樣就完成了父級(jí)組件向子級(jí)組件傳遞數(shù)據(jù)的任務(wù)。
那么組件又分為函數(shù)組件和類(lèi)組件。下面，我們分別展示類(lèi)組件和函數(shù)組件是如何獲取傳遞進(jìn)來(lái)的數(shù)據(jù)的。
我們先看類(lèi)組件的獲取方式。
class 子級(jí)組件接受數(shù)據(jù)
class 組件中使用 this.props.xx 屬性名獲取父級(jí)組件傳遞的數(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
類(lèi)組件中 this 操作相對(duì)容易，因此，React 默認(rèn)會(huì)將父級(jí)組件的傳入的數(shù)據(jù)放入 props 屬性中。而在類(lèi)組件中，如代碼所示，我們就可以直接使用 this.props 來(lái)獲取數(shù)據(jù)了。
函數(shù)子級(jí)組件接受數(shù)據(jù)
函數(shù)組件中，Props 數(shù)據(jù)會(huì)默認(rèn)傳入函數(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í)了父級(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)接觸過(guò)了，如果要是傳遞的數(shù)據(jù)是數(shù)組或者對(duì)象，我們應(yīng)該如何處理呢？
最直接的辦法就是在傳遞時(shí)，在父級(jí)組件中將數(shù)據(jù)先進(jìn)行解構(gòu)，因?yàn)榻鈽?gòu)出來(lái)的數(shù)據(jù)，正好就是符合組件 “屬性” 寫(xiě)法的：
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)傳參。而在子級(jí)組件中應(yīng)用時(shí)，與普通的應(yīng)用并沒(méi)有區(qū)別，按照解構(gòu)好的對(duì)應(yīng)格式進(jìn)行接收就可以了。
下面我們分別展示類(lèi)組件和函數(shù)組件中獲取解構(gòu)傳參的方式。
class 子級(jí)組件接受數(shù)據(jù)
依然使用 props 獲取傳參。
import React, { Component, Fragment } from'react'exportclass PropsClass extends Component {render() {// 獲取傳入的解構(gòu)數(shù)據(jù)const {name,age} =this.propsreturn (<Fragment><h1>Class 接受Props 數(shù)據(jù)</h1>{console.log(name,age,'--')}{/* 打印數(shù)據(jù) */}</Fragment>)}}exportdefault PropsClass
函數(shù)子級(jí)組件接受數(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è)置默認(rèn)值
在一定的條件下，父級(jí)組件即便沒(méi)有傳入數(shù)據(jù)，子組件依然需要展示相關(guān)內(nèi)容。那么此時(shí)，我們就可以在子組件中設(shè)置默認(rèn)值來(lái)填充，當(dāng)父級(jí)組件沒(méi)有傳入數(shù)據(jù)時(shí)，子組件使用默認(rèn)數(shù)據(jù)，而如果父級(jí)組件有數(shù)據(jù)傳入，則替換默認(rèn)值。
父級(jí)組件可以傳入數(shù)據(jù)，也可以不傳入：
import React from'react'// 引入單文件組件import PropsClass from'./PropsClass'import PropsFun from'./PropsFun'functionApp() {return (<div>{/* 父級(jí)組件沒(méi)有傳值則使用子組件的默認(rèn)值，傳遞則替換 */}<PropsClassnames="llll"/><PropsFun/></div>)}exportdefault App
類(lèi)組件設(shè)置默認(rèn)值
class 子組件中使用 static defaultProps 設(shè)置默認(rèn)值，當(dāng)然，我們依然需要從 this.props 中獲取。
import React, { Component, Fragment } from'react'exportclass PropsClass extends Component {// 此時(shí)我們就設(shè)置了 props 的默認(rèn)值，// 如果父組件沒(méi)有傳遞數(shù)據(jù)，則默認(rèn)使用// 如果傳遞了數(shù)據(jù)，則替換默認(rèn)值static defaultProps = {names:'西嶺老濕',age:18}render() {// 獲取組件傳入的數(shù)據(jù)，可能是默認(rèn)值，也可能是傳入的數(shù)據(jù)const {names,age} =this.propsreturn (<Fragment><h2>Class 組件</h2><p>{names}</p><p>{age}</p></Fragment>)}}exportdefault PropsClass
函數(shù)組件設(shè)置默認(rèn)值
函數(shù)組件需要使用組件名 .defaultProps 設(shè)置一個(gè)對(duì)象作為默認(rèn)值，依然使用形參獲取：
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è)置一個(gè)對(duì)象PropsFun.defaultProps= {name:'西嶺',age:16}exportdefault PropsFun
如果不想在子組件的形參接收時(shí)解構(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è)置一個(gè)對(duì)象PropsFun.defaultProps= {name:'西嶺',age:16}exportdefault PropsFun
向子組件傳遞 JSX
父級(jí)組件傳遞 JSX
在父級(jí)組件中，需要向子級(jí)組件傳遞 JSX ，需要將 jsx 寫(xiě)在組件的雙標(biāo)簽內(nèi)。
import React from'react'// 引入單文件組件import PropsClass from'./PropsClass'import PropsFun from'./PropsFun'functionApp() {return (<div><h1>我是App</h1>{/* 需要傳遞 JSX ，寫(xiě)在組件雙標(biāo)簽內(nèi)*/}<PropsClass>{/* 可以傳遞多個(gè)標(biāo)簽*/}<p>父級(jí)組件中傳入的JSX, p標(biāo)簽，App-Class組件</p><span>父級(jí)組件中傳入的JSX,span標(biāo)簽，App-Class組件</span></PropsClass><PropsFun/></div>)}exportdefault App
class 子組件接收 JSX
使用 this.props.children 可以接收父級(jí)組件中傳入的全部 JSX。
import React, { Component, Fragment } from'react'exportclass PropsClass extends Component {render() {return (<Fragment><h2>Class 組件</h2>{/* 接收 JSX ，可以接收多個(gè)*/}{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è)置一個(gè)對(duì)象PropsFun.defaultProps= {name:'西嶺',age:16}exportdefault PropsFun
未完待續(xù)...
明天更新組件布局小案例！
推薦閱讀：
能替代 Vue 和 React 的框架，長(zhǎng)什么樣子？
計(jì)時(shí)器組件的兩種寫(xiě)法：高階組件就是墜吼的！
恭喜你又在前端道路上進(jìn)步了一點(diǎn)點(diǎn)。
點(diǎn)個(gè)“在看”和“贊”吧！