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

效果如下：

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

时间： 2024-11-05 18:40:37

react.js从入门到精通（五）——组件之间的数据传递的相关文章

Vuex 组件之间的数据传递

在 Vue.js 的项目中,如果项目结构简单, 父子组件之间的数据传递可以使用 props 或者 $emit 等方式 http://www.cnblogs.com/wisewrong/p/6266038.html 但是如果是大型项目,很多时候都需要在子组件之间传递数据,使用之前的方式就不太方便.Vue 的状态管理工具 Vuex 完美的解决了这个问题. 一.安装并引入 Vuex 项目结构: 首先使用 npm 安装 Vuex cnpm install vuex -S 然后在 main.js 中引入

Vue2.x 兄弟组件之间的数据传递

兄弟组件之间的数据传递思路:创建三个组件分别是<my-aaa>.<my-bbb>.<my-ccc>,在<my-ccc>中接收<my-aaa>与<my-bbb>发送的数据,当改变<my-aaa>或<my-bbb>所发送的数据时,<my-ccc>接收的数据也随之改变 html <body> <div id="box"> <my-aaa></

Vue 爬坑之路（二）—— 组件之间的数据传递

Vue 的组件作用域都是孤立的,不允许在子组件的模板内直接引用父组件的数据.必须使用特定的方法才能实现组件之间的数据传递. 首先用 vue-cli 创建一个项目,其中 App.vue 是父组件,components 文件夹下都是子组件. 一.父组件向子组件传递数据在 Vue 中,可以使用 props 向子组件传递数据. 子组件部分: 这是 header.vue 的 HTML 部分,logo 是在 data 中定义的变量. 如果需要从父组件获取 logo 的值,就需要使用 props: ['lo

vue组件之间的数据传递

vue2.0 组件之间的数据传递

组件间的数据传递// 父组件<template><div class="order"><dialog-addpro v-on:closedialog="close" :proinfo="proinfo"></dialog-addpro></div></template><script>import daddpro from '../../daddpro' expo

在vue中通过使用$attrs实现组件之间的数据传递

组件之间传递数据的方式有很多种,之所以有这么多种方式,是为了满足在不同场景不同条件下的使用. 一般有三种方式: 通过 props 的方式向子组件传递(父子组件) vuex 进行状态管理非父子组件的通信传递 Vue Event Bus,使用Vue的实例,实现事件的监听和发布,实现组件之间的传递本文介绍的是使用$attrs的方式. 这个api是在2.4版本中添加的,那么为什么要添加这个特性呢? 看看官网是怎么解释的包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class

Vue（5）- 子父级组件之间的数据传递

父组件向子组件传递数据 1 Parent.vue 文件 2 3 <template> 4 <div> 5 <h2>Parent Component</h2> 6 <p> 7 <Child :ParentToChild="ParentToChildMsg" /> 8 </p> 9 </div> 10 </template> 11 12 <script> 13 im

Android学习系列之(五)Activity之间的数据传递

前言:前面我们已经掌握了 Activity 的基本使用,但是那都是在同一个 Activity 中进行操作的.那么若我们要在不同 Activity 之间进行数据交互,这又如何实现?那现在我们依旧以模拟登录注册这一个例子来进行说明一.需求说明: 模拟用户的登录注册行为,用户注册信息后,将注册时的账号.密码这一数据传递到登陆界面. 二.代码实现: 1.布局文件代码: activity_main.xml: <?xml version="1.0" encoding="utf-8

mybatis从入门到精通(五) sqlSession API的使用

mybatis从入门到精通(五) sqlSession API的使用一丶简介 SqlSession类似于mybatis对外的接口层, 它几乎囊括了所有对外的api, 因此, 学习SqlSession的使用方法对于了解mybatis还是有必要的. 对应官方文档二丶配置SqlSession的环境<environment/> <environment/> 主要包括了两种配置, 事务管理和数据源. 这里的配置仅仅是用于学习, 实际应用一般是将事务交由Spring容器管理, 数据源一般