父组件与子组件通信

  • 父组件将自己的状态传递给子组件,子组件当做属性来接收,当父组件更改自己状态的时候,子组件接收到的属性就会发生改变
  • 父组件利用ref对子组件做标记,通过调用子组件的方法以更改子组件的状态,也可以调用子组件的方法

父组中定义ref引用

import React,{Component,createRef} from 'react'
import Child1 from './Child1'
export default class App extends Component {
constructor(props){
super(props)
this.child=createRef()
}
render(){
return(
<div>
<Child1 ref={this.child}/>
<button onClick={this.fn.bind(this)}></button>
</div>
)
}
fn(){
const child=this.child.current
child.setTitle()
}
}

子组件定义好数据源和修改数据源方法

import React,{Component} from 'react'
export default class Child1 extends Component{
state={
title:'标题'
}
render(){
return (
<div>
{this.state.title}
</div>
)
}
setTitle(){
this.setstate({title:'hh'})
}
}

子组件与父组件通信

父组件将自己的某个方法传递给子组件,在方法里可以做任意操作,比如可以更改状态,子组件通过this.props接收到父组件的方法后调用。

跨组件通信

在react没有类似vue中的事件总线来解决这个问题,一是我们借助它们共同的父级组件通过代理的方式来实现,但过程会相当繁锁。react提供了Context来实现跨组件通信, 而不必显式地通过组件树的逐层传递 props。

复杂的非父子组件通信在react中很难处理,多组件间的数据共享也不好处理,在实际的工作中我们会使用flux、redux、mobx来实现

祖先子孙

  1. 定义store类 导出createContext中的Provider,COnsumer
  2. 在祖先节点中发布消息: Provider value=任意数据
  3. 在子孙节点中订阅:Consumer 回调函数{value=>(组件)}

    1.定义数据源store

    store.js
import React , {createContext} from 'react'
let {Provider,Consumer} = createContext()
export {
Provider,//发布
Consumer//订阅
}

2.祖先节点

import React ,{Component} from 'react'
import {Provider,Consumer} from './store'
import Son from './Son'
export default class App extends Component{
constructor(props){
super(props)
this.state={
name:'mingcen'
}
}
render(){
return (
<div>
<Provider value={this.state.name}>
<Son/>
</Provider>
</div>
)
}
}

3.后代节点

import React,{Component} from'react'
import {Consumer} from './store'
export default class Son1 extends Component{
constructor(props){
super(props)
this.state={
name:'uuu'
}
}
render(){
return(
<div>
<Consumer>
{
value=>{
<div>{value.name}</div>
}
}
</Consumer>
</div>
)
}
}

兄弟节点通信

  • 一个子物体挂在事件
  • 另一个挂在属性
  • 通过实践改变属性,来改变另一个组件接受的内容

    祖先
state={
count:1,
setCount:()=>{
this.setState(state=>{
return{
count:++state.count
}
})
}
}
render(){
let {count,setCount} = this.state
return(
<div>
<Provider value={{count,setCount}}>
<Cmp1></Cmp1>
<Cmp2></Cmp2>
</Provider>
</div>
)
}

兄弟Cmp2

import React, { Component ,createContext} from 'react'

export default class Cmp2 extends Component {
// 只得到了默认数据 --> 没有包裹在Provider组件中
static contextType = createContext render() {
return (
<div>
<button onClick={this.setCount.bind(this)}>自增数据</button>
</div>
)
}
setCount() {
this.context.setCount()
}
}

兄弟Cmp1

<Consumer>
{
value => <h3>{value.count}</h3>
}
</Consumer>

react之组建通信的更多相关文章

  1. React 组件间通信介绍

    React 组件间通信方式简介 React 组件间通信主要分为以下四种情况: 父组件向子组件通信 子组件向父组件通信 跨级组件之间通信 非嵌套组件间通信 下面对这四种情况分别进行介绍:   父组件向子 ...

  2. vue 和 react 组件间通信方法对比

    vue 和 react 组件间通信方法对比: 通信路径 vue的方法 react的方法 父组件 => 子组件 props(推荐).slot(推荐).this.$refs.this.$childr ...

  3. React 组件之间通信 All in One

    React 组件之间通信 All in One 组件间通信 1. 父子组件之间通信 props 2. 兄弟组件之间通信 3. 跨多层级的组件之间通信 Context API https://react ...

  4. React之组件通信

    组件通信无外乎,下面这三种父子组件,子父组件,平行组件(也叫兄弟组件)间的数据传输.下面我们来分别说一下: 父子组件: var Demo=React.createClass({ getInitialS ...

  5. angular,vue,react的父子通信

    父子通信 父传子 vue: 父组件:<child :msg="datamsg" ></child> //子组件的msg属性上加数据,datamsg是数据 子 ...

  6. React组件间通信

    众所周知,ReactJS组件与组件之间的通信是一个难点.在React实际开发中,父子组件之间的传值是比较常见的,刚入门的小伙伴很容易被组件之间的通信绕懵. 今天花了点时间总结了一下React父子组件之 ...

  7. 【React Native】在原生和React Native间通信(RN调用原生)

    一.从React Native中调用原生方法(原生模块) 原生模块是JS中也可以使用的Objective-C类.一般来说这样的每一个模块的实例都是在每一次通过JS bridge通信时创建的.他们可以导 ...

  8. React中组件通信的几种方式

    https://segmentfault.com/a/1190000012361461 需要组件之进行通信的几种情况 父组件向子组件通信 子组件向父组件通信 跨级组件通信 没有嵌套关系组件之间的通信 ...

  9. React组件间通信-sub/pub机制

    React生命周期第二个demo演示了兄弟组件的通信,需要通过父组件,比较麻烦:下面介绍sub/pub机制来事项组件间通信. 1.导包 npm i pubsub-js 2.UserSearch.jsx ...

  10. 5.React中组件通信问题

    1.父组件传递值给子组件 想必这种大家都是知道的吧!都想到了用我们react中的props,那么我在这简单的写了小demo,请看父组件 class Parent extends Component{ ...

随机推荐

  1. sql 2012中获取表的信息,包含字段的描述

    1.获取数据库中的表 select name from sysobjects where type='U' 2.获取表字段(此处是Route表) Select name from syscolumns ...

  2. Appium移动自动化测试(一)--安装Appium

    Appium 自动化测试是很早之前就想学习和研究的技术了,可是一直抽不出一块完整的时间来做这件事儿.现在终于有了. 反观各种互联网的招聘移动测试成了主流,如果再不去学习移动自动化测试技术将会被淘汰. ...

  3. CodeForces 703B(容斥定理)

    题目链接:http://codeforces.com/contest/703/problem/B 解题思路: 第一次写 先求出每个点到其他点的价值,并将其记录 dp[i][j]=1(i<j),然 ...

  4. Android 内部存储和外部存储

    应用程序的一些配置文件需要存储在手机上.一般分为内部存储和SD卡存储. 一. 内部存储 ,以 FileOutputStream File file = new File(getFilesDir(),& ...

  5. hdu 4630 树状数组

    思路:这题的处理方式和hdu4358有点像.我们用一个pre[x]表示约数x的倍数上次出现的位置,将查询按区间的右节点升序排序.num[i]的约数为j,如果pre[j]为0,就将pre[j]置为i;否 ...

  6. JDK + Tomcat 安装配置

    学习Java 开发的第一步就是配置环境,今天第一次配置,把过程记录下以备后用. 一.下载JDK.Tomcat JDK:http://www.oracle.com/technetwork/java/ja ...

  7. cocos2dx中的其他层

    在cocos2dx中,CCLayer默认是黑色的,但是有时候需要有其他颜色北京的图层,那么就需要用到CCLayerColor 如下代码: ccColor4B color =ccc4(255, 0, 0 ...

  8. [转] 你真的会写单例模式吗——Java实现

    你真的会写单例模式吗——Java实现 原文:http://www.tuicool.com/articles/MBrUfy6 单例模式可能是代码最少的模式了,但是少不一定意味着简单,想要用好.用对单例模 ...

  9. 奇葩问题:同样的字符串equal为false

    问题:什么情况下 "同样" 的字符串会不equal呢?例如   "a".equal("a")  => false 在你看来,这可能是个 ...

  10. Tomcat正常启动,访问所有页面均报404异常,404异常总结

    今天遇到一个问题:Tomcat正常启动,访问所有页面均报404异常 404异常,很常见,大多情况是路径错误.web.xml文件映射路径写错.服务器设置.servlet的jar包未导进去或者没有随项目发 ...