react.js從入門到精通（五）——組件之間的數據傳遞
阿新 • • 發佈：2018-08-11
efault def 通道 span 代碼 serve urn div mar
一、組件之間在靜態中的數據傳遞
從上面的代碼我們可以看出，兩個組件之間的數據是分離，但如果我們有某種需求，將數據從一個組件傳到另一個組件中，該如何實現？
場景設計：
將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()進行刷新頁面，將得到的數據渲染上去。
react.js從入門到精通（五）——組件之間的數據傳遞