客服电话
APP下载
迪恩网络APP
随时随地掌握行业动态
官方微信
扫描二维码
关注迪恩网络微信公众号
父组件与子组件通信
父组中定义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'})
}
}
子组件与父组件通信父组件将自己的某个方法传递给子组件，在方法里可以做任意操作，比如可以更改状态，子组件通过 跨组件通信在react没有类似vue中的事件总线来解决这个问题，一是我们借助它们共同的父级组件通过代理的方式来实现，但过程会相当繁锁。react提供了Context来实现跨组件通信, 而不必显式地通过组件树的逐层传递 props。
祖先子孙
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>
总结本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注极客世界的更多内容！ |
请发表评论