使用react進行父子組件傳值
阿新 • • 發佈:2019-05-08
event 嵌套 pan con sna audio 之前 循環 bind
在單頁面裏面,父子組件傳值是比較常見的,之前一直用vue開發,今天研究了一下react的父子組件傳值,和vue差不多的思路,父組件向子組件傳值,父通過初始state,子組件通過this.props進行接收就可以了;子組件向父組件傳值需要綁定一個事件,然後事件是父組件傳遞過來的this.props.event來進行值的更替,話不多說,上代碼:
父傳子:
父組件:自定義名
<ChildCom content={‘我是父級過來的內容‘}/>
子組件:使用this.props.自定義的名字接收
<div>{this.props.content}</div>
子傳父:
子組件:事件傳遞 記著加bind(this)
import React from ‘react‘ class ChildCom extends React.Component { valueToParent(value) { this.props.onValue(value); } render() { return ( <div> <h2>子組件</h2> <div> <a onClick={this.valueToParent.bind(this,123)}>向父組件傳值123</a> </div> </div> ) } } exportdefault ChildCom;
父組件:
import React from ‘react‘ import ChildCom from ‘./childCom.js‘ class ParentCom extends React.Component { state = { getChildValue: ‘‘ } getChildValue(value) { this.setState({ getChildValue: value }) } render() { return ( <div> <h1>父組件</h1> <div>子組件過來的值為:{this.state.getChildValue}</div> <ChildCom onValue={this.getChildValue.bind(this)}/> </div> ) } } export default ParentCom;
下面是詳細的傳值可以再看一次:
父組件向子組件傳值:
父組件Comment.js:
1 import React from "react" 2 import ComentList from "./ComentList" 3 4 class Comment extends React.Component { 5 constructor(props) { 6 super(props); 7 this.state = { 8 arr: [{ 9 "userName": "fangMing", "text": "123333", "result": true 10 }, { 11 "userName": "zhangSan", "text": "345555", "result": false 12 }, { 13 "userName": "liSi", "text": "567777", "result": true 14 }, { 15 "userName": "wangWu", "text": "789999", "result": true 16 },] 17 } 18 } 19 20 21 22 23 24 render() { 25 return ( 26 <div> 27 <ComentList arr={this.state.arr}> //這裏把state裏面的arr傳遞到子組件 28 </ComentList> 29 30 </div> 31 32 ) 33 } 34 } 35 36 export default Comment;
子組件ComentList.js:
import React from "react" class ComentList extends React.Component { constructor(props) { super(props); } render() { return ( <div className="list"> <ul> { this.props.arr.map(item => { //這個地方通過this.props.arr接收到父組件傳過來的arr,然後在{}裏面進行js的循環 return ( <li key={item.userName}> {item.userName} 評論是:{item.text} </li> ) }) } </ul> </div> ) } } export default ComentList;
父組件向子組件傳值是比較容易的,我們來看一下效果:
好了,我們開始重頭戲,
子組件向父組件傳值,
同樣是父組件:
import React from "react" import ComentList from "./ComentList" class Comment extends React.Component { constructor(props) { super(props); this.state = { parentText: "this is parent text", arr: [{ "userName": "fangMing", "text": "123333", "result": true }, { "userName": "zhangSan", "text": "345555", "result": false }, { "userName": "liSi", "text": "567777", "result": true }, { "userName": "wangWu", "text": "789999", "result": true },] } } fn(data) { this.setState({ parentText: data //把父組件中的parentText替換為子組件傳遞的值 },() =>{ console.log(this.state.parentText);//setState是異步操作,但是我們可以在它的回調函數裏面進行操作 }); } render() { return ( <div> //通過綁定事件進行值的運算,這個地方一定要記得.bind(this), 不然會報錯,切記切記,因為通過事件傳遞的時候this的指向已經改變 <ComentList arr={this.state.arr} pfn={this.fn.bind(this)}> </ComentList> <p> text is {this.state.parentText} </p> </div> ) } } export default Comment;
子組件:
import React from "react" class ComentList extends React.Component { constructor(props) { super(props); this.state = ({ childText: "this is child text" }) } clickFun(text) { this.props.pfn(text)//這個地方把值傳遞給了props的事件當中 } render() { return ( <div className="list"> <ul> { this.props.arr.map(item => { return ( <li key={item.userName}> {item.userName} 評論是:{item.text} </li> ) }) } </ul> //通過事件進行傳值,如果想得到event,可以在參數最後加一個event, 這個地方還是要強調,this,this,this <button onClick={this.clickFun.bind(this, this.state.childText)}> click me </button> </div> ) } } export default ComentList;
before:
after:
最後想說一點,如果嵌套的父子組件很深好幾層,這個時候我想你應該考慮用狀態管理工具redux了
使用react進行父子組件傳值