五、React组件通信-父子组件的通信

父子组件通信

• 父组件传值给子组件 props接收
• 传值类型约定 propTypes
• 子组件传父组件，通过父组件传入函数

父组件

import React, { Component } from "react";

import MainBanner from "./mainBanner";

export class Main extends Component {
  constructor() {
    super();
    this.state = {
      bannerList: ["轮播图-1", "轮播图-2", "轮播图-3", "轮播图-4"],
      age: 0
    };
  }
  
  parentChange(param) {
      // 通过子组件点击就修改了父组件的值
      this.setState({
          age: params
      })
  }
 
  render() {
    const { bannerList } = this.state;
    return (
      <div className="main">
        <h3>主体内容部分</h3>
        <MainBanner bannerList={bannerList} parantMethod={(param) => this.parentChange(param)} />
      </div>
    );
  }
}

export default Main;

子组件

import React, { Component } from "react";

export class mainBanner extends Component {
  // props 接收参数
  constructor(props) {
    console.log(props, "props");
    super(props);
  }
  
  btnClick(params) {
      console.log('子组件发生了点击', params)
      // 这里可以拿到父组件传过来的函数进行调用
      this.props.parantMethod()
  }

  render() {
    return (
      <div className="banner">
        <h2 onClick={() => this.btnClick('params')}>轮播图数据</h2>
        <ul>
          {this.props.bannerList.map((item) => (
            <li key={item}>{item}</li>
          ))}
        </ul>
      </div>
    );
  }
}

// 对传过来的值进行类型约定
import PropTypes from "prop-types"
// defaultProps默认值
mainBanner.propTypes = {
  bannerList: PropTypes.array.isRequired,
}

export default mainBanner;