react组件间如何通信?

vue.js组件之间如何通信?下面本篇文章就来给大家介绍一下Vue.js组件间通信方式。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

react组件间如何通信?

1、父组件向子组件通信

父组件通过向子组件传递 props,子组件得到 props 后进行相应的处理。

1.png

2、子组件向父组件通信

2.png

3、跨级组件之间通信

父组件向子组件的子组件通信,向更深层的子组件通信

思路1:中间组件层层传递 props

如果父组件结构较深,那么中间的每一层组件都要去传递 props,增加了复杂度,并且这些 props 并不是这些中间组件自己所需要的。当组件层次在三层以内可以采用这种方式,当组件嵌套过深时,就考虑其他方式

思路2:使用 context 对象

context 相当于一个全局变量,是一个大容器,我们可以把要通信的内容放在这个容器中,这样一来,不管嵌套有多深,都可以随意取用

使用 context 也很简单,需满足:

1、上级组件要声明自己支持 context,提供 context 中属性的 PropTypes,并提供一个函数来返回相应的 context 对象
2、子组件要声明自己需要使用 context,并提供其需要使用的 context 属性的 PropTypes
3、父组件需提供一个 getChildContext 函数,以返回一个初始的 context 对象

如果组件中使用构造函数(constructor),还需要在构造函数中传入第二个参数 context,并在 super 调用父类构造函数是传入 context,否则会造成组件中无法使用 context。

Sub.js

import React from "react";
import SubSub from "./SubSub";
const Sub = (props) =>{
    return(
        <div>
            <SubSub />
        </div>
    );
}
export default Sub;

SubSub.js:

import React,{ Component } from "react";
import PropTypes from "prop-types";

export default class SubSub extends Component{
    // 子组件声明自己需要使用 context
    static contextTypes = {
        color:PropTypes.string,
        callback:PropTypes.func,
    }
    render(){
        const style = { color:this.context.color }
        const cb = (msg) => {
            return () => {
                this.context.callback(msg);
            }
        }
        return(
            <div style = { style }>
                SUBSUB
                <button onClick = { cb("我胡汉三又回来了!") }>点击我</button>
            </div>
        );
    }
}

3.png

4.png

5.png

6.png

4、非嵌套组件间通信

或者说是兄弟组件间

首先需要:

我们需要使用一个 events 包:

npm install events --save

新建一个 ev.js,引入 events 包,并向外提供一个事件对象,供通信时使用:

6.png

7.png

通信参考网址:https://blog.csdn.net/zhengjie0722/article/details/81979919

更多web前端开发知识,请查阅 HTML中文网 !!

以上就是react组件间如何通信?的详细内容,更多请关注html中文网其它相关文章!

赞(0) 打赏
未经允许不得转载:html中文网首页 » React 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏