一、组件之间在静态中的数据传递
从上面的代码我们可以看出，两个组件之间的数据是分离，但如果我们有某种需求，将数据从一个组件传到另一个组件中，该如何实现？
场景设计：
将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从入门到精通（五）——组件之间的数据传递
原文地址：https://www.cnblogs.com/xukun588/p/9458721.html