【React系列】父子组件通信—props属性传值

本文来自#React系列教程：https://mp.weixin.qq.com/mp/appmsgalbum?__biz=Mzg5MDAzNzkwNA==&action=getalbum&album_id=1566025152667107329)

一. 认识组件的嵌套

组件之间存在嵌套关系：

• 在之前的案例中，我们只是创建了一个组件App；
• 如果我们一个应用程序将所有的逻辑都放在一个组件中，那么这个组件就会变成非常的臃肿和难以维护；
• 所以组件化的核心思想应该是对组件进行拆分，拆分成一个个小的组件；
• 再将这些组件组合嵌套在一起，最终形成我们的应用程序；

我们来分析一下下面代码的嵌套逻辑：

import React, {
    Component } from 'react';

function Header() {
   
  return <h2>Header</h2>
}

function Main() {
   
  return (
    <div>
      <Banner/>
      <ProductList/>
    </div>
  )
}

function Banner() {
   
  return <div>Banner</div>
}

function ProductList() {
   
  return (
    <ul>
      <li>商品1</li>
      <li>商品2</li>
      <li>商品3</li>
      <li>商品4</li>
      <li>商品5</li>
    </ul>
  )
}

function Footer() {
   
  return <h2>Footer</h2>
}

export default class App extends Component {
   
  render() {
   
    return (
      <div>
        <Header/>
        <Main/>
        <Footer/>
      </div>
    )
  }
}

上面的嵌套逻辑如下，它们存在如下关系：

• App组件是Header、Main、Footer组件的父组件；
• Main组件是Banner、ProductList组件的父组件；

在开发过程中，我们会经常遇到需要组件之间相互进行通信：

• 比如App可能使用了多个Header，每个地方的Header展示的内容不同，那么我们就需要使用者传递给Header一些数据，让其进行展示；
• 又比如我们在Main中一次性请求了Banner数据和ProductList数据，那么就需要传递给他们来进行展示；
• 也可能是子组件中发生了事件，需要由父组件来完成某些操作，那就需要子组件向父组件传递事件；

总之，在一个React项目中，组件之间的通信是非常重要的环节；

父组件在展示子组件，可能会传递一些数据给子组件：

• 父组件通过 属性=值 的形式来传递给子组件数据；
• 子组件通过 props 参数获取父组件传递过来的数据；

二. 父组件传递子组件

2.1. 子组件是class组件

我们这里先演示子组件是class组件：

import React, {
    Component } from 'react';

// 1.类子组件
class ChildCpn1 extends Component {
   
  constructor(props) {
   
    super();
    this.props = props;
  }

  render() {
   
    const {
    name, age, height } = this.props;

    return (
      <div>
        <h2>我是class的组件</h2>
        <p>展示父组件传递过来的数据: {
   name + " " + age + " " + height}</p>
      </div>
    )
  }
}

export default class App extends Component {
   
  render() {
   
    return (
      <div>
        <ChildCpn1 name="why" age="18" height="1.88" />
      </div>
    )
  }
}

按照上面的结构，我们每一个子组件都需要写构造器来完成：this.props = props;

其实呢，大可不必，因为我们可以调用super(props)，我们来看一下Component的源码：

function Component(pr