[JavaScript知识库]React中的购物车加减按钮(简易版)

主要是createContext 中的Provider Consumer两个参数

import React, { Component, createContext } from "react";
{
  /* 这严格来说是在页面分了组件 就是少了import步骤 */
}
// 按理说这只是一个分组件传参的东东  一个页面上用不上吧
// 这关键之处在把三个东西绑定在一个大的盒子里，这个盒子就是上面的createContext
const { Provider, Consumer } = createContext();
// 貌似加减按钮可以直接写在下面。。Reduce和Add功能差不多
const Reduce = () => {
  return (
    <div>
      <Consumer>
        {(value) => <button onClick={value.reduce}>-</button>}
      </Consumer>
    </div>
  );
};
// 这是加按钮  用Consumer去消费Provider传过来的东西  主要是add方法
const Add = () => {
  return (
    <div>
      <Consumer>{(value) => <button onClick={value.add}>+</button>}</Consumer>
    </div>
  );
};

// 这是父组件  点击方法也在这里写，然后方法要在Provider的value中曝光
class allCart extends Component {
  // 这个定义框中的初始值，后续的num操作也是基于此
  state = {
    num: 10,
  };
  // 点击减少函数方法，写法较为陌生，记住
  reduce = () => {
    this.setState((preState) => {
      return {
        num: --preState.num,
      };
    });
  };
  // 点击加一方法
  add = () => {
    this.setState((preState) => {
      return {
        num: ++preState.num,
      };
    });
  };
  // 渲染部分
  render() {
    return (
      // Provider代替原来的空标签，可以加一个value值，把参数、方法分享给下面的子组件标签
      <Provider
        value={{
          num: this.state.num,
          reduce: this.reduce,
          add: this.add,
        }}
      >
        <h1>我是一个可以加减的框框</h1>
        <Consumer>
          {(value) => (
            <>
              <Reduce />
              <span>{value.num}</span>
              <Add />
            </>
          )}
        </Consumer>
      </Provider>
    );
  }
}

export default allCart;