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

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

web端三大框架react、vue和angular,本篇教程介绍react的从入门到精通。


八、组件之间在静态中的数据传递

从上面的代码我们可以看出,两个组件之间的数据是分离,但如果我们有某种需求,将数据从一个组件传到另一个组件中,该如何实现?


场景设计:

将demo4.js中的demo4Data传递到demo2.js中

import React,{ Component } from 'react'
import Demo2 from './demo2.js'
class Demo4 extends Component {
  constructor(props) {
    super(props);
    this.state = {
      demo4Data:"主组件的数据"
    };
  }
  render() {
    return (
      <div style={{width:"100%",height:"300px",fontSize:"20px",textAlign:"center",backgroundColor:"#ccc"}}>
      Demo4
      <Demo2/>
      </div>
    )
  }
}
export default Demo4



(1)方法一:使用临时存储、永久存储或cookie的方式

代码如下:


demo4代码如下:


import React,{ Component } from 'react'
import Demo2 from './demo2.js'
class Demo4 extends Component {
  constructor(props) {
    super(props);
    this.state = {
      demo4Data:"主组件的数据"
    };
  }
  render() {
    return (
      <div style={{width:"100%",height:"300px",fontSize:"20px",textAlign:"center",backgroundColor:"#ccc"}}>
      Demo4
      <Demo2/>
      </div>
    )
  }
  componentDidMount=()=>{
    console.log(2);
    sessionStorage.setItem("demo4Data",this.state.demo4Data);
  };
}
export default Demo4


demo2代码如下:


import React,{ Component } from 'react'
import Demo3 from './demo3.js'
class Demo2 extends Component {
  constructor(props) {
    super(props);
    this.state = {
      demo4Data:''
    };
  }
  render() {
    return (
      <div style={{width:"100%",height:"300px",fontSize:"20px",textAlign:"center",backgroundColor:"#ccc"}}>
      Demo2[接受来自demo4的数据({this.state.demo4Data})]
      <Demo3/>
      </div>
    )
  }
  componentDidMount=()=>{
    let demo4Data=sessionStorage.getItem("demo4Data");
    console.log(demo4Data);
    this.setState({
      demo4Data:demo4Data
    });
  };
}
export default Demo2



效果如下:

image.png



以上使用临时存储的方式,永久存储和cookie的方法类似。


(2)方法二:使用props来实现父子组件之间的数据传递

上面临时存储的方式用到的是js原生的一些知识,但因为现在是依据react.js框架进行开发,所以提倡使用react.js的知识来实现功能。


demo4代码如下:


import React,{ Component } from 'react'
import Demo2 from './demo2.js'
class Demo4 extends Component {
  constructor(props) {
    super(props);
    this.state = {
      demo4Data:"主组件的数据",
      demo4Data2:"父子传值"
    };
  }
  render() {
    return (
      <div style={{width:"100%",height:"300px",fontSize:"20px",textAlign:"center",backgroundColor:"#ccc"}}>
      Demo4
      <Demo2 data={this.state.demo4Data2}/>
      </div>
    )
  }
  componentDidMount=()=>{
    console.log(2);
    sessionStorage.setItem("demo4Data",this.state.demo4Data);
  };
}
export default Demo4



demo2代码如下:


import React,{ Component } from 'react'
import Demo3 from './demo3.js'
class Demo2 extends Component {
  constructor(props) {
    super(props);
    this.state = {
      demo4Data:''
    };
  }
  render() {
    return (
      <div style={{width:"100%",height:"300px",fontSize:"20px",textAlign:"center",backgroundColor:"#ccc"}}>
      Demo2[接受来自demo4的数据({this.state.demo4Data})]
      <Demo3/>
      Demo2[接受来自demo4的父子传值数据({this.props.data})]
      </div>
    )
  }
  componentDidMount=()=>{
    let demo4Data=sessionStorage.getItem("demo4Data");
    console.log(demo4Data);
    this.setState({
      demo4Data:demo4Data
    });
  };
}
export default Demo2


效果如下:

image.png



props就相当于一个媒介,链接这两个组件之间的通道。


(3)、组件之间在动态中的数据传递

从上面我们可以看出,当页面加载时,组件之间的数据传递自动执行。现在我们设计另一个场景。


场景:当点击下列id为demo4后,demo2上的数据发生变化。

demo4代码如下:

import React,{ Component } from 'react'
import Demo2 from './demo2.js'
class Demo4 extends Component {
  constructor(props) {
    super(props);
    this.state = {
      demo4Data:"主组件的数据",
      demo4Data2:"父子传值",
      demo4Data3:"我是动态传值"
    };
  }
  render() {
    return (
      <div style={{width:"100%",height:"300px",fontSize:"20px",textAlign:"center",backgroundColor:"#ccc"}}>
      Demo4
      <Demo2 data={this.state.demo4Data2} id="demo2"
          ref={ref => this.datademo4 = ref}
          dataMyScreen={this.state.datademo4}/>
      <span id="demo4" onClick={()=>this.demo4Click()}>动态传值点击</span>
      </div>
    )
  }
  demo4Click=()=>{
    this.datademo4.setdatademo4(this.state.demo4Data3);
  };
  componentDidMount=()=>{
    console.log(2);
    sessionStorage.setItem("demo4Data",this.state.demo4Data);
  };
}
export default Demo4


demo2代码如下:


import React,{ Component } from 'react'
import Demo3 from './demo3.js'
class Demo2 extends Component {
  constructor(props) {
    super(props);
    this.state = {
      demo4Data:''
    };
  }
  render() {
    return (
      <div style={{width:"100%",height:"300px",fontSize:"20px",textAlign:"center",backgroundColor:"#ccc"}}>
      Demo2[接受来自demo4的数据({this.state.demo4Data})]
      <Demo3/>
      Demo2[接受来自demo4的父子传值数据({this.props.data})]
      </div>
    )
  }
  //方法名应该与主组件上的一致
  setdatademo4=(data)=>{
    this.setState({
      demo4Data:data
    });
  };
  componentDidMount=()=>{
    let demo4Data=sessionStorage.getItem("demo4Data");
    console.log(demo4Data);
    this.setState({
      demo4Data:demo4Data
    });
  };
}
export default Demo2



image.pngimage.png

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

如果你对上面的一无所知的话可以访问追梦猪git下载demo实现快捷开发,省掉安装的步骤

追梦猪react项目demo实例(https://github.com/jiawenguang/React-demo.git)

可以通过git clone方式下载项目结构。


追梦猪网站致力于前端分享申明:本站内容搜集整理而来请勿商业用途,仅供交流所用,如若侵犯您的权益请邮件站长进行删除!

文明浏览请勿传播非法内容