提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

前言

记录一下React学习中父子通信的用法。

1.父传子

代码如下（示例）：
子组件：ModalText

	//父组件
	constructor(props){
    super(props)
    this.props = props
    this.state = { text : 0}
    }
    
    //传入一个text，text值为state里的text
	<ModalText text={this.state.text}></ModalText>
	
	//定义一个按钮绑定add方法
	<Button onClick={this.add}>父组件一共点击了{this.state.text}次</Button>

	//add方法
	add = () =>{
	  setTimeout(() => {
      this.setState((state) =>{
      return state.text++
      })
    },0)
	}
	//子组件
	constructor(props) {
	    super(props);
	    this.props = props;
    }
    //通过this.props接收父组件传过来的值进行展示
    <span>父组件点击了{this.props.text}次</span>

父组件模块点击次数展示

子组件模块次数展示

2.子传父

代码如下（示例）：

	//子组件
	
    this.state = {
      chilrenText:0
    }

	//定义按钮点击+1
	<button onClick={this.add}>点击父组件+1 共{this.state.chilrenText}次</button>
	//add方法
	  add = () => {
    this.state.chilrenText++
    // 传给父组件调用handleChange渲染页面
    this.props.sendChildren(this.state.chilrenText)
  }

  //父组件
  
  // 接收子组件传来的数据
  //修改父组件中的值为子组件传过来的值
  handleChange = (e) =>{
    this.setState({
      chilrenText:e
    })
  }
  //展示
  <span>子组件一共点击了{this.state.chilrenText}次</span>

子组件

父组件

总结

记录了一下学习过程中父子通信问题，其中了解一些this.state直接赋值和通过setstate进行赋值的区别。