为了账号安全,请及时绑定邮箱和手机立即绑定

react.js从入门到精通(五)——组件之间的数据传递

标签:
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)方法一:使用临时存储、永久存储或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
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
效果如下:

https://img1.sycdn.imooc.com//5b6e82bb0001d99404000351.jpg

以上使用临时存储的方式,永久存储和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

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

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

解决方法:

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

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

通过事件触发,将数据传到子组件中,然后使用this.setState()进行刷新页面,将得到的数据渲染上去。

原文出处:https://www.cnblogs.com/xukun588/p/9458721.html

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消