react组件之间的几种通信情况
组件之间的几种通信情况
- 父组件向子组件通信
- 子组件向父组件通信
- 跨级组件通信
- 没有嵌套关系组件之间的通信
1,父组件向子组件传递
React数据流动是单向的,父组件向子组件通信也是最常见的;父组件通过props向子组件传递需要的信息
在引用子组件的时候传递,相当于一个属性,例如:
//父组件
class Parent extends Component{
state = {
msg: 'start'
}; render() {
return <Child parms={this.state.msg} />; //父组件引用子组件时,将state状态数据以属性的方式传递给子组件props对象的parms属性中
}
}
//子组件
class Child extends Component{
render() {
return <p>{this.props.parms}</p> //子组件通过this.props.parms使用父组件传递过来的值
} }
2,子组件向父组件传递
- 利用回调函数
- 利用自定义事件机制
子组件通过 调用父组件传递到子组件的方法 让父组件自己去修改自己的状态值。
父组件向子组件传递函数:
<Child parm={this.state.msg} transMsg={msg=>this.transMsg(msg)}/>
子组件调用父组件函数:
this.props.transMsg(parms);this.props.parent.fn(666);//子组件使用props.parent的整个父组件可以任意调用父组件下的函数
完整代码:
class Parent extends Component{ constructor(props) {
super(props);
state = {
msg: 'start'
};
}
transMsg(types){
var newOrders = [];
for(let type of types){
if(type)
alert(type);
} }
render() {
return <Child parms={this.state.msg} />;
}
}
class Child extends Component{ constructor(props) {
super(props);
// call parent component
console.log("parms :",this.props.parms);
this.props.transMsg("hi ~~");
}
render() {
return <p>{this.props.parms}</p>
}
}
react组件之间的几种通信情况的更多相关文章
- React 组件之间通信 All in One
React 组件之间通信 All in One 组件间通信 1. 父子组件之间通信 props 2. 兄弟组件之间通信 3. 跨多层级的组件之间通信 Context API https://react ...
- React组件导入的两种方式(动态导入组件的实现)
一. react组件两种导入方式 React组件可以通过两种方式导入另一个组件 import(常用) import component from './component' require const ...
- Blazor 组件之间使用 EventCallback 进行通信
翻译自 Waqas Anwar 2021年3月28日的文章 <Communication between Blazor Components using EventCallback> [1 ...
- 使用reflux进行react组件之间的通信
前言 组件之间为什么要通信?因为有依赖. 那么,作为React组件,怎么通信? React官网说, 进行 父-子 通信,可以直接pass props. 进行 子-父 通信,往父组件传给子组件的函数注入 ...
- react 组件之间的通信
react推崇的是单向数据流,自上而下进行数据的传递,但是由下而上或者不在一条数据流上的组件之间的通信就会变的复杂.解决通信问题的方法很多,如果只是父子级关系,父级可以将一个回调函数当作属性传递给子级 ...
- react 组件之间传值
谈及React时,就会想到一个很重要的思想,就是组件化思想.它将可以重用的部分进行组件化开发,形成一个个相对独立的组件,那么组件化后,你也会提出些疑问,组件与组件之间,将怎样进行信息的传递呢?下面来介 ...
- React组件之间通过Props传值的技巧(小案例,帮助体会理解props、state、受控组件和非受控组件等)
本文重要是根据react小书上的一个很简单的例子改编的,加上自己的学习理解,希望可以通过实际案例让大家对概念有更清晰的理解,当然也希望能一块学习. import React,{Component} f ...
- Vue组件之间数据交互与通信
Vue 的组件作用域都是孤立的,不允许在子组件的模板内直接引用父组件的数据.必须使用特定的方法才能实现组件之间的数据传递. 一.父组件向子组件传递数据 在 Vue 中,可以使用 props 向子组件传 ...
- React: React组件创建的三种方式
一.简介 在前面介绍的React组件知识中,对于组件的创建我只是用了其中某一种方式.其实,在2013年React诞生之初,对于React组件的创建,仅仅只有一种方式,也即createClass函数,在 ...
随机推荐
- Spring Boot(七)扩展分析
前面的章节在分析SpringBoot启动过程中,我们发现SpringBoot使用Spring框架提供的SpringFactoriesLoader这个类,实现检索META-INF/spring.fact ...
- jQuery的动画与特效
显示与隐藏 show() 和 hide() 方法 动画效果的show() 和 hide() show(speed,[]callback) hide(speed,[]callback) speed:表示 ...
- canvas画布上定位点击位置
两种方法: 1. cvs.onclick = function (e) { if (e.offsetX || e.layerX) { var x = e.offsetX == undefined ? ...
- hdu 1851(A Simple Game)(sg博弈)
A Simple Game Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/65535 K (Java/Others)Tot ...
- [转载]看看大牛们是怎样获得英文综述(reviews)的?
对于做实验的童鞋来说,平时看综述必不可少,可是如何获得自己想要的却并不是一件容易的事情,这里整理并推荐几种行之有效的方法: 1. http://www.annualreviews.org/,这是一个顶 ...
- 【题解】51nod 1672区间交
二分答案 + two - pointer + 树状数组大法好ヽ(゚∀゚)メ(゚∀゚)ノ 我们可以直接二分一个答案,然后检验 是否存在一个值大于等于这个二分的答案的,且覆盖次数大于等于 \(k\) 的区 ...
- BZOJ3343 & 洛谷2801:教主的魔法——题解
http://www.lydsy.com/JudgeOnline/problem.php?id=3343 https://www.luogu.org/problemnew/show/2801 题目描述 ...
- CF939E:Maximize! ——题解
http://codeforces.com/problemset/problem/939/E https://vjudge.net/problem/CodeForces-939E 给一个集合,每次两个 ...
- HDU.1596 find the safest road (Floyd)
HDU.1596 find the safest road (Floyd) 题意分析 与普通的最短路不太相同,本题有些许的变化. 1. 要找到由i到j最安全的路,故在求解的时候要保证mp[i][j]尽 ...
- HDU.2647 Reward(拓扑排序 TopSort)
HDU.2647 Reward(拓扑排序 TopSort) 题意分析 裸的拓扑排序 详解请移步 算法学习 拓扑排序(TopSort) 这道题有一点变化是要求计算最后的金钱数.最少金钱值是888,最少的 ...