概述
父组件与子组件通信
- 父组件将自己的状态传递给子组件，子组件当做属性来接收，当父组件更改自己状态的时候，子组件接收到的属性就会发生改变
- 父组件利用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来实现
祖先子孙
- 定义store类 导出createContext中的Provider,COnsumer
- 在祖先节点中发布消息： Provider value=任意数据
- 在子孙节点中订阅：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之组件通信详解的全部内容，希望文章能够帮你解决react之组件通信详解所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复