关于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

二、 子组件向父组件传值

子组件通过调用父组件传递到子组件的方法可以将子组件的属性传递到父组件。

子组件代码：