您现在的位置是：网站首页> 编程资料编程资料

React 实现爷孙组件间相互通信_React_

2023-05-24 352人已围观

简介 React 实现爷孙组件间相互通信_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 ( 爷爷组件
name:{name}
age:{age}
 {/* 改变数据孙组件也更新 */}  {/* 传入state对象和foo回调函数 */} {/* foo函数用于孙组件和爷组件通信 */}  this.updateDatas(name, age) }}>
 ) } handelClick() { this.setState({ nickName: '虎威神', level: 9999 }) } updateDatas(name, age) { this.setState({ name, age }) } } class Father extends Component { render() { return ( 爸爸组件
 ) } } class Son extends Component { render() { // 解构 const { nickName, level, foo } = this.context return ( 儿子组件
nickname:{nickName}
level:{level}
 {/* 下面两种调用方式都可以 */} {/* 改变爷组件的数据 */} 
 ) } handelClick() { this.context.foo('牛霸天', 18) } } // 接受爷组件传递的值 Son.contextType = UserMessage

爷给孙组件通信就不多说了，直接创建context传入默认对象，然后在爷组件用该创建名创建对象包裹父组件，通过value传值过去，然后在孙组件Son.contextType 进行接收，在this.context取值即可。