react.js從入門到精通(五)——組件之間的數據傳遞


一、組件之間在靜態中的數據傳遞

從上面的代碼我們可以看出,兩個組件之間的數據是分離,但如果我們有某種需求,將數據從一個組件傳到另一個組件中,該如何實現?

場景設計:

將Home.js中的HomeData傳遞到MyScreen.js中 

import React,{ Component } from 'react' import MyScreen from "./MyScreen"; class Home extends Component { constructor(props) { super(props); this.state = { HomeData:"這是主組件的數據" }; } render() { return ( <div style={{width:"100%",height:"300px",fontSize:"20px"}}> <div style={{width:"100%",height:"100px",backgroundColor:"#ff0"}}></div> <MyScreen/> <div style={{width:"100%",height:"100px",backgroundColor:"#f0f"}}></div> </div> ) } } export default Home
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20

(1)方法一:使用臨時存儲、永久存儲或cookie的方式

代碼如下:

Home.js代碼如下:
import React,{ Component } from 'react' import MyScreen from "./MyScreen"; class Home extends Component { constructor(props) { super(props); this.state = { HomeData:"這是主組件的數據" }; } render() { return ( <div style={{width:"100%",height:"300px",fontSize:"20px"}}> <div style={{width:"100%",height:"100px",backgroundColor:"#ff0"}}></div> <MyScreen/> <div style={{width:"100%",height:"100px",backgroundColor:"#f0f"}}></div> </div> ) } componentDidMount=()=>{ sessionStorage.setItem("HomeData",this.state.HomeData); }; } export default Home
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
MyScreen.js代碼如下:
import React,{ Component } from 'react' class MyScreen extends Component { constructor(props) { super(props); this.state = { data:"" }; } render() { return ( <div style={{width:"100%",height:"100px",fontSize:"12px",backgroundColor:"#0ff",textAlign:"center",lineHeight:"100px"}} onClick={()=>this.click()}> {this.state.data} </div> ) } click=()=>{ alert("點擊到了!!!!"); }; componentDidMount=()=>{ let HomeData=sessionStorage.getItem("HomeData"); console.log(HomeData); this.setState({ data:HomeData }); }; } export default MyScreen
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
效果如下:

這里寫圖片描述

以上使用臨時存儲的方式,永久存儲和cookie的方法類似。

(2)方法二:使用props來實現父子組件之間的數據傳遞

上面臨時存儲的方式用到的是js原生的一些知識,但因為現在是依據react.js框架進行開發,所以提倡使用react.js的知識來實現功能。

Home.js代碼如下:

import React,{ Component } from 'react' import MyScreen from "./MyScreen"; class Home extends Component { constructor(props) { super(props); this.state = { HomeData:"這是主組件的數據" }; } render() { return ( <div style={{width:"100%",height:"300px",fontSize:"20px"}}> <div style={{width:"100%",height:"100px",backgroundColor:"#ff0"}}></div> <MyScreen data={this.state.HomeData}/> <div style={{width:"100%",height:"100px",backgroundColor:"#f0f"}}></div> </div> ) } } export default Home
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21

MyScreen.js代碼如下:

import React,{ Component } from 'react' class MyScreen extends Component { constructor(props) { super(props); this.state = { }; } render() { return ( <div style={{width:"100%",height:"100px",fontSize:"12px",backgroundColor:"#0ff",textAlign:"center",lineHeight:"100px"}} onClick={()=>this.click()}> {this.props.data} </div> ) } click=()=>{ alert("點擊到了!!!!"); }; } export default MyScreen
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21

props就相當於一個媒介,鏈接這兩個組件之間的通道。

二、組件之間在動態中的數據傳遞

從上面我們可以看出,當頁面加載時,組件之間的數據傳遞自動執行。現在我們設計另一個場景。

場景:當點擊下列id為div1后,div2上的數據發生變化。

import React,{ Component } from 'react' import MyScreen from "./MyScreen"; class Home extends Component { constructor(props) { super(props); this.state = { HomeData:"這是主組件的數據" }; } render() { return ( <div style={{width:"100%",height:"300px",fontSize:"20px"}}> <div id="div1" style={{width:"100%",height:"100px",backgroundColor:"#ff0"}}onClick={()=>this.div1Click()}></div> <MyScreen id="div2" data={this.state.HomeData}/> <div style={{width:"100%",height:"100px",backgroundColor:"#f0f"}}></div> </div> ) } div1Click=()=>{ }; } export default Home
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23

解決方法:

Home.js代碼如下:

import React,{ Component } from 'react' import MyScreen from "./MyScreen"; class Home extends Component { constructor(props) { super(props); this.state = { HomeData:"這是主組件的數據" }; } render() { return ( <div style={{width:"100%",height:"300px",fontSize:"20px"}}> <div id="div1" style={{width:"100%",height:"100px",backgroundColor:"#ff0"}}onClick={()=>this.div1Click()}></div> <MyScreen id="div2" ref={ref => this.MyScreenRef = ref} dataMyScreen={this.state.dataMyScreen}> </MyScreen> <div style={{width:"100%",height:"100px",backgroundColor:"#f0f"}}></div> </div> ) } div1Click=()=>{ //將數據傳遞給子組件 this.MyScreenRef.setDataMyScreen(this.state.HomeData); }; } export default Home
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28

MyScreen.js代碼如下:

import React,{ Component } from 'react' class MyScreen extends Component { constructor(props) { super(props); this.state = { data:"這是子組件的數據" }; } render() { return ( <div style={{width:"100%",height:"100px",fontSize:"12px",backgroundColor:"#0ff",textAlign:"center",lineHeight:"100px"}} onClick={()=>this.click()}> {this.state.data} </div> ) } //方法名應該與主組件上的一致 setDataMyScreen=(data)=>{ this.setState({ data:data }); }; click=()=>{ alert("點擊到了!!!!"); }; } export default MyScreen
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28

通過事件觸發,將數據傳到子組件中,然后使用this.setState()進行刷新頁面,將得到的數據渲染上去。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM