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<div style="color:transparent">来源gaodai.ma#com搞#代!码网</div>(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;

更多react的相关知识，请查阅 搞代码网 ！！

以上就是react子向父通信有哪些方法？的详细内容，更多请关注gaodaima搞代码网其它相关文章！

喜欢 (0)赏

[搞代码]

分享 (0)