所以,在嵌套关系上,就会有 3 种不同的可能性:父组件向子组件通信(最常见的方式)、子组件向父组件通信和没有嵌套关系的组件之间通信。
在用 React 之前的组件开发模式时,常常需要接收组件运行时的状态,这时我们常用的方法有以下两种:
1、利用回调函数:这是 JavaScript 灵活方便之处,这样就可以拿到运行时状态。
2、 利用自定义事件机制:这种方法更通用,使用也更广泛。设计组件时,考虑加入事件机制往往可以达到简化组件 API 的目的。
在 React 中,子组件向父组件通信可以使用上面的任意一种方法。但有时用自定义事件会显然过于复杂,为了达到目的,一般会选择较为简单的方法。
子组件向父组件通信一般用回调函数,父组件事先定义好回调函数。并将回调函数传递给子组件,子组件调用回调函数,向父组件通信。
//父组件 import React,{Component} from 'react'; import Children from './App'; class Parent extends Component{ constructor(props){ super(props); this.state={ index : 0 } } getNumCallback = (num) => { this.setState({ index :num }) alert(this.state.index) } render(){ return( <div> <Children date = {this.state.date} getNumCallback = {this.getNumCallback.bind(this)} /> </div> ) } } export default Parent; //子组件 import React,{Component} from 'react'; class Children extends Component{ constructor(props){ super(props); this.state = { num : 0 } } numClickHander = ()=>{ this.props.getNumCallback(this.state.num+1) this.setState({ num:this.state.num +1 }) } render(){ return( <div> <button onClick = {this.numClickHander.bind(this)}>{this.state.num}</button> </div> ) } } export default Children;
更多web前端开发知识,请查阅 HTML中文网 !!
以上就是react子向父通信有哪些方法?的详细内容,更多请关注易知道|edz.cc其它相关文章!