标签:stat 临时 line text ram keyword sdn 传递 rom
从上面的代码我们可以看出,两个组件之间的数据是分离,但如果我们有某种需求,将数据从一个组件传到另一个组件中,该如何实现?
将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
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
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
上面临时存储的方式用到的是js原生的一些知识,但因为现在是依据react.js框架进行开发,所以提倡使用react.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
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
从上面我们可以看出,当页面加载时,组件之间的数据传递自动执行。现在我们设计另一个场景。
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
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
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
标签:stat 临时 line text ram keyword sdn 传递 rom
原文地址:https://www.cnblogs.com/xukun588/p/9458721.html