关于React的父子通信

一、 父值组件向子组件传
父组件向子组件传值，通过`props`，将父组件的`state`传递给了子组件。

父组件代码：

import React, { Component } from "react";
import Child from './Child'  //引入子组件
 
export class App extends Component {
//定义数据
  state = {
    txt: '狒狒',
  }
  render () {
    return <div>
    //渲染子组件，并向子组件传递txt属性
      <Child txt={this.state.txt} ></Child>  
    </div>;
  }
}
 
export default App;
子组件代码:  
创建一个Child.jsx

import React, { Component } from 'react'
 
export class Child extends Component {
// 使用props属性接收父组件传递过来的参数
  constructor (props) {
    super(props)
  }
 
  render () {
    return (
      <div>
      // 渲染，props从父组件接收过来的参数
        {this.props.txt}
      </div>
    )
  }
}
 
export default Child
二、 子组件向父组件传值
子组件通过调用父组件传递到子组件的方法可以将子组件的属性传递到父组件。

子组件代码：

import React, { Component } from 'react'
 
export class Child extends Component {
  constructor (props) {
    super(props)
  }
 
//定义数据
  state = {
    msg: '狒狒2'
  }
 
//点击事件
  getChild = () => {
    this.props.getChild(this.state.msg)
  }
 
  render () {
    return (
      <div>
        <button onClick={this.getChild}>子往父传值</button>
      </div>
    )
  }
}
 
export default Child
父组件代码：

import React, { Component } from "react";
import Child from './Child'  //引入子组件
 
export class App extends Component {
 
state = {
    msg: ''
  }
 
//用于接收子组件的传值方法，参数为子组件传递过来的值
getChildFn = (e) => {
    console.log(e);
    this.setState({
    //把子组件传递过来的值赋给this.state中的属性
      msg: e
    })
  }
 
  render () {
    return <div>
    //1.  渲染子组件，设置子组件访问的方法,getChild属性名为子组件中调用的父组件方法名
      <Child getChild={this.getChildFn}></Child>
       {this.state.msg}
    </div>;
  }
}
 
export default App;
这是我对React父子通信的理解，感谢大家的阅读，如果其中有错误，希望大家指出