react父子组件通信

欢迎关注微信公众号：【全栈攻略】

在 React 中，数据是自顶而下单向流动的，即从父组件到子组件。
所以就存在父子组件之间的通信的必要性了。

父组件.jsx

import React from 'react';
import Child from './child'class Father extends React.Component {constructor(props){super(props);this.state={msg:'我是父组件的信息',name:'父组件',age:10000}}callback=(msg,name,age)=>{// setState方法,修改msg的值,值是由child里面传过来的this.setState({msg,name,age});}render() {return (<div className="Father"><p> Message: {this.state.msg}</p><Child // 父组件向子组件通信（传值）callback={this.callback} age={this.state.age} name={this.state.name}></Child></div>);}
}export default Father;

子组件.jsx

import React from "react";class Child extends React.Component{constructor(props){super(props);this.state={name:'子组件',age:8,msg:"我是子组件的消息"}}change=()=>{// 子组件向父组件通信（传值）      this.props.callback(this.state.msg,this.state.name,this.state.age);}render(){return(<div>//在子组件中,通过 this.props.name  this.props.age就能拿到父组件里面的数据<div>{this.props.name}</div><div>{this.props.age}</div><button onClick={this.change}>点击</button></div>)}
}export default Child;

PS：未来的你，一定会感谢今天拼命努力的自己！

react父子组件通信相关推荐

react父子组件通信案例
父组件:App组件子组件:Search组件.List组件案例需求:文本框中输入关键词,点击搜索按钮后,下方列表展示出搜索结果实现思路: 子组件Search组件向父组件App传递状态(状态包括:是 ...
[react] react父子组件如何通信？
[react] react父子组件如何通信? props 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主目录与歌谣一起通关前端面试题
React基础—父子组件通信
1. 父子组件通信在上一小节<React基础-PropTypes类型检查>中已经定义了父.子组件,接下来的工作就将在这个案例上做拓展. 比如这里为列表右侧添加一个删除按钮,然后点击后删除 ...
Vue.js 父子组件通信的十种方式；告诉世界前端也能做 AI；你可能不知道的14个JavaScript调试技巧...
记得点击文章末尾的"阅读原文"查看哟~ 下面先一起看下本周的摘要吧~ 想了解老用户如何参与阿里云双十一1折拼团特惠主机的,可以看第二条推送,文中提供了两种方法~,一起看看本周有哪些 ...
Vue的父子组件通信(十种)
设计的面试题 Vue中父子组件通信有哪些方式? 概述通信方式无外乎就那几种: Prop 常用$emit 组件封装用的较多.sync 语法糖 (较少)$attrs和$listeners(组件封装用的较 ...
子组件调用父组件方法_vue父子组件通信以及非父子组件通信的方法
组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.一般来说,组件可以有以下几种关系,父子关系.兄弟关系和隔代关系,简化点可以分为父子关系和 ...
Vue.js-Day04-AM【父子组件通信（父传子、子传父）、动态组件、组件的生命周期、动画】
Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 目录 1.复习父子组件通信 1.1.父传子(自定义属性) 1.2.子传父(自定义事件) 2.动态组件 2.1.实现 ...
Vue.js-Day03-PM【组件通信（安装Vetur插件、父子组件通信、子父组件通信）、项目发送与启动（项目发给别人、启动别人的项目）】
Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 目录 6.组件通信安装 Vetur 插件 6.1.父子组件通信子定义props 父组件模板图解 6.2.子父组 ...
vue组件通信之父子组件通信
准备工作: 首先,新建一个项目,如果这里有不会的同学,可以参考我转载过的文章 http://www.cnblogs.com/Sky-Ice/p/8875958.html vue 脚手架安装及新建项目 ...

react父子组件通信

PS：未来的你，一定会感谢今天拼命努力的自己！

react父子组件通信相关推荐

最新文章

热门文章