父组中定义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来实现
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>
版权说明 : 本文为转载文章, 版权归原作者所有 版权申明
原文链接 : https://www.cnblogs.com/ypSharing/p/15405424.html
内容来源于网络,如有侵权,请联系作者删除!