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是一个对象,也可以传递方法
      
        {this.props.children}
      
    )
  }
}


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

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

class App extends Component {
render() {
    return (
      <>
      -
      
      +
      
    )
  }
}


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

  
  
  
  ,document.getElementById('root')
)