非父子组件传值
react的非父子组件传值可以是使用订阅模式
const observer = {
list: [],
subscribe(callback) {
this.list.push(callback)
}
dispatch(data) {
this.list.forEach(item => {
item(data)
})
}
}
import {Component} from 'react'
import observer from 'observer.js'
class Child1 extends Component {
componentWillMount() {
observer.subscribe((data) => {
console.log(data)
})
}
render() {
return <div></div>
}
}
export default Child1
import {Component} from 'react'
import observer from 'observer.js'
class Child2 extends Component {
trsData = () => {
observer.dispatch('这是我要传递的数据')
}
render() {
return <div>
<button onClick={this.trsData}>点击</button>
</div>
}
}
export default Child2
import {Component} from 'react'
import Child1 from 'Child1.js'
import Child2 from 'Child2.js'
class Parent extends Component {
trsData = () => {
observer.dispatch('这是我要传递的数据')
}
render() {
return <div>
<Child1/>
<Child2/>
</div>
}
}
export default Parent