react-contex案例

// 1.使用context就需要引入，createContext

import React,{Component, createContext} from 'react';

import {render} from 'react-dom'

// 2.创建createContext方法
// console.log(createContext()) //输出Provider()提供者与Consumer()参数接收者方法
const {
  Provider,
  Consumer:ConsumerConsumer
} = createContext()

// 3.创建用于保存数据的一个空的类组件
class CountProvider extends Component {
  // 5.创建state，设定参数
  constructor() {
    super()
    this.state = {
      count : 100
    }
  }

  // 10.创建方法
  incrementCount = () => {
    this.setState({
      count: this.state.count + 1
    })
  }

  decrementCount = () => {
    this.setState({
      count : this.state.count -1
    })
  }

  render() {
    return (
      // 用Provider把props.children包括起来
      // 6.Provider接收一个参数value是一个对象,也可以传递方法
      <Provider value={{
        count : this.state.count,
        onIncrementCount : this.incrementCount,
        onDecrementCount : this.decrementCount
      }}>
        {this.props.children}
      </Provider>
    )
  }
}


class CountButton extends Component {
  render() {
    // console.log(this.props)
    return(
      <ConsumerConsumer>
        {/* <button>{ this.props.children }</button> */}
        {
          ({onIncrementCount,onDecrementCount}) => {
            {/* console.log(onIncrementCount,onDecrementCount) */}
            const handler =  this.props.type === 'increment' ?  onIncrementCount : onDecrementCount
            {/* console.log(this.props.type) */}
            return(
              <button  onClick={handler}>{ this.props.children }</button>
            )
          }
        }
      </ConsumerConsumer>
    )
  }
}

class Counter extends Component {
  render() {
    return (
      // 7.接收参数，接收参数的话就需要改成JS，里面接收的是一个方法，不然会报错
      <ConsumerConsumer>
      {/* <span>{this.state.data}</span> */}
      {/* 8.解构赋值出定义的参数 */}
      {
        ({count}) => {
          return(
            <span>{count}</span>
          )
        }
      }
      </ConsumerConsumer>
    )
  }
}

class App extends Component {
render() {
    return (
      <>
      <CountButton type ='decrement'>-</CountButton>
      <Counter/>
      <CountButton type ='increment'>+</CountButton>
      </>
    )
  }
}


// 4.创建的类组件把<App>组件给包括起来
render(

  <CountProvider>
  <App />
  </CountProvider>
  ,document.getElementById('root')
)