|
父组件与子组件通信 - 父组件将自己的状态传递给子组件，子组件当做属性来接收，当父组件更改自己状态的时候，子组件接收到的属性就会发生改变
- 父组件利用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>
总结本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注51zixue.net的更多内容！
下载地址:
JavaScript onclick 和 click 的区别详解
JS实现网页导航条特效 |
