React 中组件间通信的几种方式

标签: react 通信
5人阅读 评论(0) 收藏 举报
分类:

在使用 React 的过程中,不可避免的需要组件间进行消息传递(通信),组件间通信大体有下面几种情况:

1 父组件向子组件通信
2 子组件向父组件通信

父组件向子组件通信
这是最简单也是最常用的一种通信方式:父组件通过向子组件传递 props,子组件得到 props 后进行相应的处理。
下面是演示代码:

父组件 App.js:

import React,{ Component } from "react";
import Sub from "./SubComponent.js";
import "./App.css";

export default class App extends Component{

    render(){
        return(
            <div>
                <Sub title = "今年过节不收礼" />
            </div>
        )
    }
}

子组件 SubComponent.js:

import React from "react";

const Sub = (props) => {
    return(
        <h1>
            { props.title }
        </h1>
    )
}

export default Sub;

子组件向父组件通信
利用回调函数,可以实现子组件向父组件通信:父组件将一个函数作为 props 传递给子组件,子组件调用该回调函数,便可以向父组件通信。
下面是演示代码:

SubComponent.js:

import React from "react";

const Sub = (props) => {
    const cb = (msg) => {
        return () => {
            props.callback(msg)
        }
    }
    return(
        <div>
            <button onClick = { cb("我们通信把") }>点击我</button>
        </div>
    )
}

export default Sub;

App.js:

import React,{ Component } from "react";
import Sub from "./SubComponent.js";
import "./App.css";

export default class App extends Component{
    callback(msg){
        console.log(msg);
    }
    render(){
        return(
            <div>
                <Sub callback = { this.callback.bind(this) } />
            </div>
        )
    }
}

目前只用到了这两种,后续用到新的再来更新

查看评论

React fundamental 和 React Router

-
  • 1970年01月01日 08:00

React组件间信息传递方式

React组件间信息传递方式
  • guangyao88
  • guangyao88
  • 2017-05-12 11:55:25
  • 6947

React组件之间传值

前言 今天群里面有很多都在问关于 React 组件之间是如何通信的问题,之前自己写的时候也遇到过这类问题。下面是我看到的一篇不错英文版的翻译,看过我博客的人都知道,我翻译可能不会按部就班,会尽可...
  • limm33
  • limm33
  • 2016-03-21 10:07:12
  • 37111

react父子组件间的交流

本博客主要讲述,react中父组件和子组件之间的交流,其中包括父组件和子组件的值的交流和方法的交流,即父组件如何如何传值给子组件,父组件将方法传给子组件,父组件如何调用子组件的方法。...
  • genius_yym
  • genius_yym
  • 2017-06-11 18:05:29
  • 4198

React组件之间的传值

父组件向子组件传值?传参,props接收 子组件向父组件传值?回调函数 这里重点说一下无关系组件之间的交互 React中没有任何嵌套关系的组件之间如何传值? 方案一:全局广播的方式,即Publ...
  • kongjunchao159
  • kongjunchao159
  • 2017-05-25 14:38:18
  • 2659

关于React组件之间如何优雅地传值的探讨

闲话不多说,开篇撸代码,你可以会看到类似如下的结构:import React, { Component } from 'react';// 父组件 class Parent extends Compo...
  • yuzhongzi81
  • yuzhongzi81
  • 2017-12-25 15:32:18
  • 380

react组件之间的传值

原著序 处理 React 组件之间的交流方式,主要取决于组件之间的关系,然而这些关系的约定人就是你。 我不会讲太多关于 data-stores、data-adapters 或者 data-...
  • Jesse_Suo
  • Jesse_Suo
  • 2017-03-13 22:02:50
  • 1978

react组件传值

**父组件向子组件传值** ------------- &amp;lt;div id = &quot;out&quot;&amp;gt;&amp;lt;/div&amp;gt; &amp;lt;...
  • ouyangchaoqun
  • ouyangchaoqun
  • 2017-08-23 16:40:20
  • 268

React 子组件向父组件传值

子组件需要控制自己的 state, 然后告诉父组件自己的state,通过props调用父组件中用来控制state的函数,在父组件中展示子组件的state变化。/***实现在输入框输入邮箱时,在div中...
  • haoaiqian
  • haoaiqian
  • 2017-07-23 17:10:06
  • 6671

react 的组件一级一级往外抛出的结构

如:组件一级一级抛出, (为了显现组件的出处)1. 一级目录抛出2. 二级目录抛出3. 在其他 复合组件中调用...
  • qq_38719039
  • qq_38719039
  • 2018-04-08 11:51:01
  • 16
    个人资料
    持之以恒
    等级:
    访问量: 1万+
    积分: 539
    排名: 9万+
    最新评论