react 父子組件之間通訊props
實(shí)現(xiàn)父子組件雙向數(shù)據(jù)流整體的思路是:
1,父組件可以向子組件傳遞props,props中帶有初始化子組件的數(shù)據(jù),還有回調(diào)函數(shù)
2,子組件的state發(fā)生變化時(shí),在子組件的事件處理函數(shù)中,手動(dòng)觸發(fā)父函數(shù)傳遞進(jìn)來(lái)的回調(diào)函數(shù),同時(shí)時(shí)將子組件的數(shù)據(jù)傳遞回去(有時(shí)間研究)
父組件
父組件中定義一個(gè)函數(shù),包含一個(gè)props的參數(shù),函數(shù)內(nèi)利用super(props)傳遞給子組件,this.state中用于定義本頁(yè)面中要用到的以及要傳遞給子組件的變量。
父組件的render函數(shù)中利用<Table list={this.state.list}/>此種形式傳遞給子組件
(ps:此例子中也包含組件之間的嵌套,同時(shí)組件的名稱開(kāi)頭字母必須大寫(xiě),不然會(huì)報(bào)錯(cuò))
import React from 'react'; import Footer from './footer.js' import Table from './table.js' class pagedemo extends React.Component { constructor(props) { super(props); this.state = { list: [{ 'id':'1', 'title':'123', 'time':'2017', 'person':'cheny0815', 'type':'type', 'operation':'operation' },{ 'id':'2', 'title':'456', 'time':'2017', 'person':'cheny0815', 'type':'type', 'operation':'operation' },{ 'id':'3', 'title':'789', 'time':'2017', 'person':'cheny0815', 'type':'type', 'operation':'operation' }] } } render() { let list = this.state.list; return ( <div className="content"> <div className="content_main"> <Table list={list}/> //組件之間的通訊 </div> <Footer /> //組件嵌套 </div> ); } } export default pagedemo;
子組件(table.js)
子組件調(diào)用父組個(gè)傳遞過(guò)來(lái)的參數(shù),并進(jìn)行傳值
import React from 'react'; function table(props) { console.log(props); return ( <div className="table_main"> <table> <tbody> <tr className="first_tr"> <td>內(nèi)容</td> <td>發(fā)起人</td> <td>類型</td> <td>時(shí)間</td> <td>操作</td> </tr> { props.list.map(function(name){ //接受父組件傳遞過(guò)來(lái)的值并進(jìn)行處理 return ( <tr key={name.id}> <td>{name.title}</td> <td>{name.person}</td> <td>{name.type}</td> <td>{name.time}</td> <td>{name.operation}</td> </tr> ) }) } </tbody> </table> </div> ) } export default table;
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
關(guān)于React Native報(bào)Cannot initialize a parameter of type''NSArra
這篇文章主要介紹了關(guān)于React Native報(bào)Cannot initialize a parameter of type'NSArray<id<RCTBridgeModule>>錯(cuò)誤,本文給大家分享解決方案,需要的朋友可以參考下2021-05-05React 中常用的幾種路由跳轉(zhuǎn)方式小結(jié)
基本路由跳轉(zhuǎn)是最常見(jiàn)的一種方式,下面介紹React 中常用的幾種路由跳轉(zhuǎn)方式,感興趣的朋友一起看看吧2023-12-12React?hooks中useState踩坑之異步的問(wèn)題
這篇文章主要介紹了React?hooks中useState踩坑之異步的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03reactjs學(xué)習(xí)解決unknown at rule @tailwind css
這篇文章主要介紹了reactjs學(xué)習(xí)解決unknown at rule @tailwind css問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-02-02react如何使用useRef模仿抖音標(biāo)題里面添加標(biāo)簽內(nèi)容
本文介紹了如何模仿抖音發(fā)布頁(yè)面,使用div元素作為輸入框,并利用CSS樣式和JavaScript動(dòng)態(tài)操作DOM,實(shí)現(xiàn)類似于input輸入框的功能,感興趣的朋友跟隨小編一起看看吧2024-10-10詳解Stack?Navigator中使用自定義的Render?Callback
這篇文章主要為大家介紹了Stack?Navigator中使用自定義的Render?Callback使用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-10-10