React高级组件实现计步器

定义一个入口Cart.jsx

import React, { Component } from 'react'
//数字组件
import Count from './Count'
//加减按钮组件
import CountBUtton from './CountButton'
//状态管理，包括数字添加，加减函数
import {CountProvider} from './counterContext'

export default class Cart extends Component {
    render() {
        return (
            <CountProvider>
            //根据类型生成+，—
                <CountBUtton type="decrement"></CountBUtton>
                <Count></Count>
                <CountBUtton type="increment"></CountBUtton>
            </CountProvider>
        )
    }
}

状态管理

import React,{createContext} from 'react'
//解构出来重新封装Provider
const {Provider,Consumer:CountConsumer}=createContext()

class CountProvider extends React.Component{
    constructor(){
        super();
        this.state={
            count:1
        }
    }
    //加法函数
    increment=()=>{
        this.setState({
            count:this.state.count+1
        })
    }
    //减法函数
    decrement=()=>{
        this.setState({
            count:this.state.count-1
        })
    }
    render(){
        return (
            <Provider value={{
            //传递的数字
                count:this.state.count,
                //传递出去的方法，在button中解构接受
                increment:this.increment,
                decrement:this.decrement
            }}>
                {
                    this.props.children
                }
            </Provider>
        )
    }
}
export  {
    CountProvider,CountConsumer
}

两个组件

import React from 'react'
//解构的Consumer的方法
import {CountConsumer} from './CounterContext'
const Count=()=>{
    return (
        <CountConsumer>
        {
            ({count})=>{
                return <span>{count}</span>
            }
        }
        
        </CountConsumer>
    )
    
}
export default Count;
//按钮---------------------------
import React from 'react'
import {CountConsumer} from './CounterContext'

const CountButton =(props)=>{
    return (
        <CountConsumer>
        {
            ({increment,decrement})=>{
                let {type}=props;
                let btnText=type==='increment'?'+':'-';
                let handleClick=type==='increment'?increment:decrement
                return <button onClick={handleClick}>{btnText}</button>
            }
        }
        </CountConsumer>
    )
}

export default CountButton;