react子向父通信有哪些方法?

React 是以组合组件的形式组织的,组件因为彼此是相互独立的,从传递信息的内容上看,几乎所有类型的信息都可以实现传递,例如字符串、数组、对象、方法或自定义组件等。

所以,在嵌套关系上,就会有 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子向父通信有哪些方法?的详细内容,更多请关注html中文网其它相关文章!

赞(0) 打赏
未经允许不得转载:html中文网首页 » React 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏