react父子通讯

• 父子通讯
  父传数据给子，子传数据给父
• react组件
  class 组件名 extends React.Component

• react组件区别
  1.容器组件
  容器组件也就是我们所谓的父组件，作用是储存数据，分发数据
  2.视图组件
  而视图组件就是我们所谓的子组件，作用是显示数据

  
  组件之间的关系
  

  其中DefaulPage对应的就是容器组件(父组件)
  而其他的都是视图组件(子组件)

• 容器组件(父组件)

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import * as actions from './redux/actions';
import Header from './Header';
import List from './List';
import Swiper from './Swiper';
import Footer from '../common/Footer';
import $http from '../../utils/request';
// 在个common是小写的，common是公共部分

export class DefaultPage extends Component {
  constructor(props){
    super();
    this.state={
      // 这里的state相当于date
      flowlist:[]
    }
  }
  static propTypes = {
    index: PropTypes.object.isRequired,
    actions: PropTypes.object.isRequired,
  };
  // 挂载函数，页面创建后立马运行的函数
  componentDidMount(){
    this.getlist();
  }
  // 获取后台数据,并给flowlist
  async getlist(){
    let url = '/flower/getList';
    let res = await $http.get(url);
    this.setState({
      flowlist:res.flowers
    })
  }

  render() {
// 传数据给子组件
    let token = localStorage.getItem('token');
    console.log(token);
    let {flowlist} = this.state;
    return (
      <div className="index-default-page">
        <Header {...this.props}/>
        <Swiper/>
        <List flowlist={flowlist}/>
        <Footer pageName="index"/>
      </div>
    );
  }
}

/* 把所有的state添加到props*/
function mapStateToProps(state) {
  return {
    index: state.index,
  };
}

/* 把所有的action添加到props */
function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators({ ...actions }, dispatch)
  };
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(DefaultPage);

容器组件里引用子组件，通过添加属性传数据到子组件，也可以直接把父组件的props全部传过去{...props}
而子组件则负责把这些数据显示出来

• 子组件(视图组件)

import React, { Component } from 'react';
import { Link } from 'react-router-dom';

export default class List extends Component {
  constructor(props){
    super();
  }
  static propTypes = {
  };
  render() {
    let flowlist = this.props.flowlist;
   // 获取父组件传来的数据并进行渲染页面
    return (
      flowlist.map(item=>{
        return (
          <div className="index-list list" key={item.flowerId}>
        <Link to={`/detail/${item.flowerId}`} className="mt-10">
        <a to="/flower/detail" className="flex item">
          <p className="img-box">
            <img
              className="w100pc"
              src={item.imgUrl}
              alt=""
            />
          </p>
          <div className="text bg-fff fg1 flex2 jc-sb">
            <div className="h88 bdb flex2 jc-c">
              <p className="f14">{item.name}</p>
              <p className="f12 lh15 mt-5">
                {item.material}
              </p>
            </div>
            <p className="h38 bdb flex aic">
              暖春新品
            </p>
            <div className="h68 flex2 jc-c rel">
              <p>
                <span className="orange">¥{item.price}</span>
                <s className="ml-10">¥{item.originPrice}</s>
              </p>
              <p className="mt-5">已售 {item.saleNum}件</p>
              <i className="iconfont icon-gouwuche abs"></i>
            </div>
          </div>
        </a>
      </Link>
      </div>
        )
      })
    );
  }
}

视图组件(子组件则负责用数据渲染页面)

• 父传子

父传子说白了无非就是父通过属性传数据给子组件下面列出方式
        <zi   name={name}/>        传名为name的变量
        <zi    {...this.props}/>         把props传给子组件的props
        <zi     change={this.change}>      传一个函数给

• 子传父

子传父，说白了就是子调用父传过来的函数，并把参数带过去
    上述里有一个父传给子一个函数，而这就是子传父的重点
   子通过this.props.change，得到父传来的函数
    我们可以触发这个函数并把参数带过去
     这个时候我们需要用到     ()=>
    onClike={()=>{change(数据)}}       通过点击调用函数传参
    这里调用参数可以使用其他事件，但是立马必须是()=>
    表示点击里面的函数就被直接调用(触发)