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

Posted xukun588

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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()进行刷新页面，将得到的数据渲染上去。

以上是关于react.js从入门到精通——组件之间的数据传递的主要内容，如果未能解决你的问题，请参考以下文章

云好课分享*React.js 框架从入门到精通#百度网盘分享：会员免费

在 React.js 的父组件中使用 react-router 时，如何使用 react context API 将数据从父组件传递到子组件？

React.Js 将道具从组件传递到 NavBar 组件？

React.js：将道具从函数传递到组件

React组件间通信

阅读《Android 从入门到精通》（34）——Intent Filter