React 实现爷孙组件间相互通信
目录
- 前言
- 爷孙组件间通信
前言
最近在学习React，给大家总结下跨组件通信中，爷孙组件之间怎么相互通信。简单明了上代码直接一把梭，不多解释。
爷孙组件间通信
案例如下：
代码：
//跨组件通信
import React, { Component } from 'react'
//创建context 给初始值
const UserMessage = React.createContext({
nickName: 'yyy',
level: 1
})
export default class TextSingal extends Component {
constructor(props) {
super(props)
this.state = {
nickName: 'kkk',
level: 99,
name: 'ppp',
age: 9999
}
}
render() {
const { name, age } = this.state
return (
<div>
<h2>爷爷组件</h2>
<h3>name:{name}</h3>
<h3>age:{age}</h3>
{/* 改变数据孙组件也更新 */}
<button onClick={() => this.handelClick()}>updated</button>
{/* 传入state对象和foo回调函数 */}
{/* foo函数用于孙组件和爷组件通信 */}
<UserMessage.Provider value={{ ...this.state, foo: (name, age) => this.updateDatas(name, age) }}>
<Father />
</UserMessage.Provider>
</div>
)
}
handelClick() {
this.setState({
nickName: '虎威神',
level: 9999
})
}
updateDatas(name, age) {
this.setState({
name,
age
})
}
}
class Father extends Component {
render() {
return (
<div>
<h2>爸爸组件</h2>
<Son />
</div>
)
}
}
class Son extends Component {
render() {
// 解构
const { nickName, level, foo } = this.context
return (
<div>
<h2>儿子组件</h2>
<h3>nickname:{nickName}</h3>
<h3>level:{level}</h3>
{/* 下面两种调用方式都可以 */}
{/* 改变爷组件的数据 */}
<button onClick={() => this.handelClick()}>updated</button>
<button onClick={() => foo('牛霸天', 18)}>updated</button>
</div>
)
}
handelClick() {
this.context.foo('牛霸天', 18)
}
}
// 接受爷组件传递的值
Son.contextType = UserMessage
爷给孙组件通信就不多说了，直接创建context传入默认对象，然后在爷组件用该创建名创建对象包裹父组件，通过value传值过去，然后在孙组件Son.contextType 进行接收，在this.context取值即可。
孙给爷传值则是和子跟父传值的道理一样，通过传入回调函数来进行修改。
到此这篇关于React 四线爷孙组件间相互通信的文章就介绍到这了,更多相关React组件通信内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
React数据传递之组件内部通信的方法
1. 概述 脱离初级前端一段时间后会发现,写样式的时间越来越少,处理数据的时间越来越多.处理数据的过程也就是实现业务逻辑的过程,这在项目中无疑是最重要的. 所以学习前端框架,了解完基本语法后,接下来就要学习其如何进行数据传递. Angular 设计之初的一大亮点就是实现了数据的双向绑定,使用 Vue 一段时间后发现,所谓数据的双向绑定,组件内部唯一的应用场景就是 form 表单(input,textarea,select, radio),而这种场景下的数据双向绑定,即便框架内部没有实现,自己实现
-
详解React hooks组件通信方法
目录 一.前言 二.父子组件通信 1)父组件传值给子组件 2)子组件传值给父组件 3)跨组件传值(父传孙子组件) 一.前言 组件通信是React中的一个重要的知识点,下面列举一下 react hooks中常用的父子.跨组件通信的方法 二.父子组件通信 1)父组件传值给子组件 子组件代码: //子组件 const Child = ({ param1, param2 }) => { return <>父组件传递的参数:{param1},{param2}</> } param1.p
-
React组件间通信的三种方法（简单易用）
目录 一.父子组件通信 二.跨级组件通信 1.逐层传值 2.跨级传值 三.兄弟(无嵌套)组件通信 四.路由传值 五.Redux React知识中一个主要内容便是组件之间的通信,以下列举几种常用的组件通信方式,结合实例,通俗易懂,建议收藏. 一.父子组件通信 原理:父组件通过props(与vue中的props区分开)向子组件通信,子组件通过回调事件与父组件通信. 首先,先创建一个父组件Parent.js跟子组件Children.js,二者的关系为直接父子关系. Parent.js父组件如下,给父组
-
详解React中组件之间通信的方式
一.是什么 我们将组件间通信可以拆分为两个词: 组件 通信 回顾Vue系列的文章,组件是vue中最强大的功能之一,同样组件化是React的核心思想 相比vue,React的组件更加灵活和多样,按照不同的方式可以分成很多类型的组件 而通信指的是发送者通过某种媒体以某种格式来传递信息到收信者以达到某个目的,广义上,任何信息的交通都是通信 组件间通信即指组件通过某种方式来传递信息以达到某个目的 二.如何通信 组件传递的方式有很多种,根据传送者和接收者可以分为如下: 父组件向子组件传递 子组件向父组件传
-
React父子组件传值(组件通信)的实现方法
目录 1.父组件传值子组件 2.子组件传值父组件 3.兄弟组件传值 1.父组件传值子组件 在引用子组件的时候传递,相当于一个属性,例如:在子组件内通过porps.param获取到这个param的值. 父组件向子组件传值,通过props,将父组件的state传递给了子组件. 父组件代码片段: constructor(props){ super(props) this.state={ message:"i am from parent" } } render(){ return( <
-
React 父子组件通信的实现方法
通讯是单向的,数据必须是由一方传到另一方. 1.父组件与子组件间的通信. 在 React 中,父组件可以向子组件通过传 props 的方式,向子组件进行通讯. 父组件 App.js import React, { Component } from 'react'; import './App.css'; import Child from './child' class App extends Component { constructor(props){ super(props); this.
-
详解React native全局变量的使用(跨组件的通信)
RN中有两种方式使用全局变量 1.通过导入导出文件的方式 新建constants.js文件 const object = { website:'http://www.hao123.com', name:'好123', }; export default object; 需要用到的时候导入文件 import constants from './constansts.js' <Text>{constants.name}</Text> 还可以有另外一种导入文件的写法 export def
-
React 实现爷孙组件间相互通信
目录 前言 爷孙组件间通信 前言 最近在学习React,给大家总结下跨组件通信中,爷孙组件之间怎么相互通信.简单明了上代码直接一把梭,不多解释. 爷孙组件间通信 案例如下: 代码: //跨组件通信 import React, { Component } from 'react' //创建context 给初始值 const UserMessage = React.createContext({ nickName: 'yyy', level: 1 }) export default class T
-
vue中组件之间相互通信传值的几种方法详解
目录 vue中组件之间相互通讯传值的方式 1.子组件和父组件通讯,通过调用父组件给组件自定义属性值来实现 2.父组件主动获取子组件数据 3.使用provide/inject方法实现 4.使用事件总线 5.vuex\localStorage\sessionStorage 总结 vue中组件之间相互通讯传值的方式 我们在使用vue进行项目开发的时候为了更好地管理项目,我们会把每个功能封装成一个个的组件,在使用的时候直接引入并且调用组件来实现代码的复用. 我们在封装组件的时候经常会留有一些预留的接口,
-
React 组件间的通信示例
前言 从官网上也有介绍组件间如何通信,但不够详细,这里做个小结,方便对比和回顾 本文内容 处理组件之间的通信, 主要取决于组件之间的关系,因此我们划分为以下三种: [父组件]向[子组件]传值: [子组件]向[父组件]传值: [组件A]向无关系[组件B]传值,一般为兄弟组件: 一.「父组件」向「子组件」传值 这是最普遍的用法,实现上也非常简单,主要是利用props来实现 // 父组件 import React from 'react'; import Son from './components/
-
vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)
vue中我们常常用到组件. 那么组件总体可以分为如下的几种关系. 父子组件, 爷孙组件, 兄弟组件. 这几种组件之间是如何通信的呢? 父子组件通信 根据vue中的文档可知, 组件的props属性用于接收父组件传递的信息. 而子组件想要向父组件传递信息, 可以使用$emit事件. 我们定义两个组件, 一个为父组件名为father, 另外一个为子组件child. 子组件通过props属性接收父组件传递的值, 这个值为fname, 是父组件的名字. 点击子组件的按钮, 触发toFather事件, 向父
-
Angularjs2不同组件间的通信实例代码
AngualrJs2官方方法是以@Input,@Output来实现组件间的相互传值,而且组件之间必须父子关系,下面给大家提供一个简单的方法,实现组件间的传值,不仅仅是父子组件,跨模块的组件也可以实现传值 /** *1.定义一个服务,作为传递参数的媒介 */ @Injectable() export class PrepService{ //定义一个属性,作为组件之间的传递参数,也可以是一个对象或方法 profileInfo: any; } /** *2.传递参数的组件,我这边简单演示,直接就在构
-
vuejs事件中心管理组件间的通信详解
本文为大家分享了vuejs事件中心管理组件间的通信,供大家参考,具体内容如下 事件中心 这个可以是一个空的全局的Vue实例,其他的组件利用这个实例emit和on自定义事件,这样组件定义了自己的事件处理方法. import Vue from 'Vue' window.eventHub = new Vue(); 事件监听和注销监听 事件监听应在更组件的created钩子函数中进行,在组件销毁前应注销事件监听 //hook created: function () { //listen event w
-
vue综合组件间的通信详解
本文实例为大家分享了vue综合组件间的通信,供大家参考,具体内容如下 实现一个ToDoList. ①完成所有的组件的创建和使用 ②add 点击add按钮时候,将用户输入的内容(todoinput),显示在(todolist) 核心代码:兄弟组件间通信 步骤1:var bus = new Vue() 步骤2:在准备接受数据的组件 bus.$on('addEvent',function(){ }) 步骤3:触发事件 bus.$emit('addEvent',123) 将todolist中数组的元素
-
vue中使用v-model完成组件间的通信
以上的两种方法,都是实现的单向数组传递,那如何实现两个组件之间的双向传递呢? 即,在父组件中修改了值,子组件会立即更新. 在子组件中修改了值,父组件中立即更新. vue中有一个很神奇的东西叫v-model,它可以完成我们的需求. 使用v-model过程中,父组件我们还是需要将子组件正常引入,只是传值方式改成了v-model 父组件 <template> <div> {{fatherText}} <Child v-model="fatherText">
-
Vue组件间的通信pubsub-js实现步骤解析
本文介绍使用发布订阅的方式进行vue组件间的通信 我认为这种方式比较自由, 不存在组件间的关系问题 1. 首先安装pubsub-js npm install --save pubsub-js 2. 订阅方组件 import PubSub from 'pubsub-js' mounted(){ // 执行异常代码 // 订阅消息 PubSub.subscribe('deleteTodo',(msg,index)=>{ this.deleteTodo(index) // 调用deleteTodo方法
-
vue 组件间的通信之子组件向父组件传值的方式
父组件向子组件传值:父组件通过属性向下传值的方式和子组件通信: 使用步骤: 定义组件:现有自定义组件com-a.com-b,com-a是com-b的父组件: 准备获取数据:com-b要获取父组件data中的name属性: 在<com-b :name="name"></com-b> 使用v-bind 绑定name属性,红色部分为属性名称,可以随意写. 在子组件定义部分里添加选项,值是个字符串数组 props:['name'],将上边红色的属性名称写在这里: 之后就