1. import React from 'react';
  2. import B from './B';
  3. class A extends React.Component{
  4. state = {
  5. msg:'我来自于A组件'
  6. }
  7. isClick=(value)=> {
  8. this.setState({
  9. msg: value
  10. })
  11. }
  12. render() {
  13. return (
  14. <div>
  15. 我是A组件:
  16.  
  17. <hr />
  18. <B msg={this.state.msg} myClick={this.isClick}/>
  19. </div>
  20.  
  21. )
  22. }
  23. }
  24.  
  25. export default A;
  1. import React from 'react';
  2.  
  3. class B extends React.Component{
  4. constructor(props) {
  5. super(props)
  6. }
  7. render() {
  8. return (
  9. <div>
  10. <h2>我是B组件:{this.props.msg}</h2>
  11. <button onClick={() => this.props.myClick('我来源于B组件')}>按钮</button>
  12. </div>
  13. )
  14. }
  15. }
  16.  
  17. export default B;

react 父子组件通信的更多相关文章

  1. 三大前端框架(react、vue、angular2+)父子组件通信总结

    公司业务需要,react.vue.angular都有接触[\无奈脸].虽然说可以拓展知识广度,但是在深度上很让人头疼.最近没事的时候回忆各框架父子组件通信,发现很模糊,于是乎稍微做了一下功课,记录于此 ...

  2. react第六单元(react组件通信-父子组件通信-子父组件通信-跨级组件的传参方式-context方式的传参)

    第六单元(react组件通信-父子组件通信-子父组件通信-跨级组件的传参方式-context方式的传参) #课程目标 1.梳理react组件之间的关系 2.掌握父子传值的方法 3.掌握子父传值的方法 ...

  3. 关于React的父子组件通信等等

    //==================================================此处为父子组件通信 1.子组件调用父组件: 父组件将子组件需要调用方法存入props属性内,子组 ...

  4. React父子组件的一个混淆点

    反正我自己是混淆了,React父子组件和组件类的继承弄混在一起了.这两个东西完全是不相关的. 父子组件可以看成两个组件标签的包含关系,在另外一个组件标签的内部就是子组件,父子组件通过这种关系通信. 组 ...

  5. Vue 非父子组件通信

    组件是Vue核心的一块内容,组件之间的通信也是很基本的开发需求.组件通信又包括父组件向子组件传数据,子组件向父组件传数据,非父子组件间的通信.前两种通信Vue的文档都说的很清楚,但是第三种文档上确只有 ...

  6. Vue 非父子组件通信方案

    Vue 非父子组件通信方案 概述 在 Vue 中模块间的通信很普遍 如果是单纯的父子组件间传递信息,父组件可以使用 props 将数据向下传递到子组件,而在子组件中可以使用 events (父组件需要 ...

  7. vue父子组件及非父子组件通信

    1.父组件传递数据给子组件 父组件数据如何传递给子组件呢?可以通过props属性来实现 父组件: <parent> <child :child-msg="msg" ...

  8. Vue(二十六)父子组件通信

    今天写了一个分页公共组件,就出现了父子组件通信的问题,今天来总结下我遇到的父子组件通信问题 一.子组件调取父组件的数据或方法 (1)props 想要把父组件的值,传到子组件中,使用props 比如你在 ...

  9. vue 父子组件通信

    算是初学vue,整理一下父子组件通信笔记. 父组件通过 prop 给子组件下发数据,子组件通过事件给父组件发送消息. 一.父组件向子组件下发数据: 1.在子组件中显式地用props选项声明它预期的数据 ...

随机推荐

  1. CCTV5 前端

    get :  fre = 11868  symbolrate  = 27500 pls_n=0------167    CCTV 9------------168    CCTV 3--------- ...

  2. CSS3_动画 animation

    在项目中,颜色,图片,等等数据都保存在数组中   动画 使元素从一种样式逐渐变化到另一种样式的 animation: name ; 无顺序要求,但是必须先写 持续时间 ,再写 延迟时间 原理 人眼在看 ...

  3. vue_过渡_动画

    过渡效果 <style> .xxxx-enter-active,         // 显示过渡 .xxxx-leave-active {        // 隐藏过渡 transitio ...

  4. Flutter: X Android license status unknown

    Flutter 环境检测问题 资料 windows cmd C:\Users\ajanuw>flutter doctor -v [√] Flutter (Channel stable, v1.0 ...

  5. JS节流和防抖

    事件的触发权很多时候都属于用户,有些情况下会产生问题: 向后台发送数据,用户频繁触发,对服务器造成压力 一些浏览器事件:window.onresize.window.mousemove等,触发的频率非 ...

  6. Apache Flink系列(1)-概述

    一.设计思想及介绍 基本思想:“一切数据都是流,批是流的特例” 1.Micro Batching 模式 在Micro-Batching模式的架构实现上就有一个自然流数据流入系统进行攒批的过程,这在一定 ...

  7. Dynamics 365 解决方案导出报错

    之前导出解决方案异常,按照CRM社区的方法解决成功,但是没有了解原因,今天看到有朋友解答了原因,也分享给大家 先来看看异常 我那时导出的是default解决方案,这是模拟 导出异常 “业务流程错误”- ...

  8. html中不常用但必须知道的标签

    1.<b>加粗</b> 为天地立心,为生民立命,为往圣继绝学,为万世开太平 2.<s>删除线</s> 为天地立心,为生民立命,为往圣继绝学,为万世开太平 ...

  9. 2018-2019-2 网络对抗技术 20165336 Exp4 恶意代码分析

    2018-2019-2 网络对抗技术 20165336 Exp4 恶意代码分析 1.实践目标 1.1是监控你自己系统的运行状态,看有没有可疑的程序在运行. 1.2是分析一个恶意软件,就分析Exp2或E ...

  10. layui 根据后台传来的值选择按钮

    {{# if(d.status == 'xxx'){ }} <a class="layui-btn layui-btn-xs layui-btn-disabled" lay- ...