热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

React组件通信的介绍(代码示例)

​本篇文章给大家带来的内容是关于React组件通信的介绍(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
本篇文章给大家带来的内容是关于React组件通信的介绍(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

最近闲来无事自学React框架,自学过程中所有的问题经验都会在此记录,希望可以帮助到学习React框架的同学,废话不多说上代码。
首先是父传子:

import React, { Component } from 'react';
import Com1 from './componments/com1'

class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      arr: [{
          "userName": "fangMing", "text": "123333", "result": true
      }, {
          "userName": "zhangSan", "text": "345555", "result": false
      }, {
          "userName": "liSi", "text": "567777", "result": true
      }, {
          "userName": "wangWu", "text": "789999", "result": true
      },]
    };
    this.foo = "我来自父组件"  //这个也是父传子方法,可能初学者有点迷,刚开始我也用来和arr = {this.state.arr}做区分
  };
  render() {
    return (
      
logo
); } } export default App;

子组件:

import React, { Component } from 'react';

class Ele extends Component{
    constructor(props){
       super(props)  
    };
    render(){
        return (
           

Hello, {this.props.age}

{this.props.fn}

    { this.props.arr.map(item => { //这个地方通过this.props.arr接收到父组件传过来的arr,然后在{}里面进行js的循环 return (
  • {item.userName} 评论是:{item.text}
  • ) }) }
); }; } export default Ele;

结果显示:

首先是子组件:

import React, { Component } from 'react';

class Ele extends Component{
    constructor(props){
       super(props);
       this.state = ({
            childText: "我来自子组件"
       })  
    };
    clickFun(text) {  //定义触发的方法
        this.props.pfn(text)//这个地方把值传递给了props的事件当中
    }
    render(){
        return (
           
{/* 通过事件进行传值,如果想得到event,可以在参数最后加一个event, 这个地方还是要强调,this,this,this */}
); }; } export default Ele;

父组件:

import React, { Component } from 'react';
import Com1 from './componments/com1'

class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      parentText: "现在是父组件",     
  };
  fn(data) {
    this.setState({
        parentText: data //把父组件中的parentText替换为子组件传递的值
    },() =>{
       console.log(this.state.parentText);//setState是异步操作,但是我们可以在它的回调函数里面进行操作
    });
  };
  render() {
    return (
      
{/*通过绑定事件进行值的运算,这个地方一定要记得.bind(this),不然会报错,切记切记,因为通过事件传递的时候this的指向已经改变 */}

text is {this.state.parentText}

); } } export default App;

以上是父子组件传值的方法,有不对的地方还望指正
还有兄弟组件传值还没学到,兄弟组件传值学到会更新上来


推荐阅读
  • 微软头条实习生分享深度学习自学指南
    本文介绍了一位微软头条实习生自学深度学习的经验分享,包括学习资源推荐、重要基础知识的学习要点等。作者强调了学好Python和数学基础的重要性,并提供了一些建议。 ... [详细]
  • 2018年人工智能大数据的爆发,学Java还是Python?
    本文介绍了2018年人工智能大数据的爆发以及学习Java和Python的相关知识。在人工智能和大数据时代,Java和Python这两门编程语言都很优秀且火爆。选择学习哪门语言要根据个人兴趣爱好来决定。Python是一门拥有简洁语法的高级编程语言,容易上手。其特色之一是强制使用空白符作为语句缩进,使得新手可以快速上手。目前,Python在人工智能领域有着广泛的应用。如果对Java、Python或大数据感兴趣,欢迎加入qq群458345782。 ... [详细]
  • 云原生边缘计算之KubeEdge简介及功能特点
    本文介绍了云原生边缘计算中的KubeEdge系统,该系统是一个开源系统,用于将容器化应用程序编排功能扩展到Edge的主机。它基于Kubernetes构建,并为网络应用程序提供基础架构支持。同时,KubeEdge具有离线模式、基于Kubernetes的节点、群集、应用程序和设备管理、资源优化等特点。此外,KubeEdge还支持跨平台工作,在私有、公共和混合云中都可以运行。同时,KubeEdge还提供数据管理和数据分析管道引擎的支持。最后,本文还介绍了KubeEdge系统生成证书的方法。 ... [详细]
  • Echarts图表重复加载、axis重复多次请求问题解决记录
    文章目录1.需求描述2.问题描述正常状态:问题状态:3.解决方法1.需求描述使用Echats实现了一个中国地图:通过选择查询周期&#x ... [详细]
  • 本文介绍了设计师伊振华受邀参与沈阳市智慧城市运行管理中心项目的整体设计,并以数字赋能和创新驱动高质量发展的理念,建设了集成、智慧、高效的一体化城市综合管理平台,促进了城市的数字化转型。该中心被称为当代城市的智能心脏,为沈阳市的智慧城市建设做出了重要贡献。 ... [详细]
  • 本文介绍了数据库的存储结构及其重要性,强调了关系数据库范例中将逻辑存储与物理存储分开的必要性。通过逻辑结构和物理结构的分离,可以实现对物理存储的重新组织和数据库的迁移,而应用程序不会察觉到任何更改。文章还展示了Oracle数据库的逻辑结构和物理结构,并介绍了表空间的概念和作用。 ... [详细]
  • IhaveconfiguredanactionforaremotenotificationwhenitarrivestomyiOsapp.Iwanttwodiff ... [详细]
  • Python字典推导式及循环列表生成字典方法
    本文介绍了Python中使用字典推导式和循环列表生成字典的方法,包括通过循环列表生成相应的字典,并给出了执行结果。详细讲解了代码实现过程。 ... [详细]
  • 本文讨论了在Windows 8上安装gvim中插件时出现的错误加载问题。作者将EasyMotion插件放在了正确的位置,但加载时却出现了错误。作者提供了下载链接和之前放置插件的位置,并列出了出现的错误信息。 ... [详细]
  • CSS3选择器的使用方法详解,提高Web开发效率和精准度
    本文详细介绍了CSS3新增的选择器方法,包括属性选择器的使用。通过CSS3选择器,可以提高Web开发的效率和精准度,使得查找元素更加方便和快捷。同时,本文还对属性选择器的各种用法进行了详细解释,并给出了相应的代码示例。通过学习本文,读者可以更好地掌握CSS3选择器的使用方法,提升自己的Web开发能力。 ... [详细]
  • “你永远都不知道明天和‘公司的意外’哪个先来。”疫情期间,这是我们最战战兢兢的心情。但是显然,有些人体会不了。这份行业数据,让笔者“柠檬” ... [详细]
  • 本文主要解析了Open judge C16H问题中涉及到的Magical Balls的快速幂和逆元算法,并给出了问题的解析和解决方法。详细介绍了问题的背景和规则,并给出了相应的算法解析和实现步骤。通过本文的解析,读者可以更好地理解和解决Open judge C16H问题中的Magical Balls部分。 ... [详细]
  • 本文讨论了使用差分约束系统求解House Man跳跃问题的思路与方法。给定一组不同高度,要求从最低点跳跃到最高点,每次跳跃的距离不超过D,并且不能改变给定的顺序。通过建立差分约束系统,将问题转化为图的建立和查询距离的问题。文章详细介绍了建立约束条件的方法,并使用SPFA算法判环并输出结果。同时还讨论了建边方向和跳跃顺序的关系。 ... [详细]
  • 生成对抗式网络GAN及其衍生CGAN、DCGAN、WGAN、LSGAN、BEGAN介绍
    一、GAN原理介绍学习GAN的第一篇论文当然由是IanGoodfellow于2014年发表的GenerativeAdversarialNetworks(论文下载链接arxiv:[h ... [详细]
  • [译]技术公司十年经验的职场生涯回顾
    本文是一位在技术公司工作十年的职场人士对自己职业生涯的总结回顾。她的职业规划与众不同,令人深思又有趣。其中涉及到的内容有机器学习、创新创业以及引用了女性主义者在TED演讲中的部分讲义。文章表达了对职业生涯的愿望和希望,认为人类有能力不断改善自己。 ... [详细]
author-avatar
一号香久山日氵冥
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有