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()进行刷新页面，将得到的数据渲染上去。