利用 useContext 以及useReducer进行改变color颜色

srs/Colors/index.js

import React from 'react'
import Btns from './Button'
import Color from './CoLors'
import {ColorText} from './methods'
function Texts() {
    return (
        <div>
            111
            <ColorText>
            <Color/>
            <Btns/>
            </ColorText>
        </div>
    )
}
export default Texts

srs/Colors/Colors.js

import React,{useContext} from 'react'
import {ColorContext} from './methods'
function Color (){
    const {color} = useContext(ColorContext)
    return(
        <div style = {{color}}>
            字体颜色{color}
        </div>
    )
}
export default Color

srs/Colors/methods.js

import React ,{createContext,useReducer} from 'react'

export const ColorContext = createContext({})

export const UPDATE_COLOR = 'UPDATE_COLOR'

const reducer = (state,action) =>{
    switch (action.type) {
        case UPDATE_COLOR:
            return action.color
        default:
            return state
    }
}

export const ColorText = props =>{
    const [color , dispatch] = useReducer(reducer,'green')
    return(
        <ColorContext.Provider value={{color,dispatch}} >
            {props.children}
        </ColorContext.Provider>   
    )
}

srs/Colors/Button.js

import React ,{useContext}from 'react'
import {ColorContext,UPDATE_COLOR} from './methods'
function Btns (){
    const {dispatch} = useContext(ColorContext)
    return(
        <div >
            <button onClick={()=>{dispatch({type:UPDATE_COLOR,color:'yellow'})}}>黄色</button>
            <button onClick={()=>{dispatch({type:UPDATE_COLOR,color:'red'})}}>红色</button>
        </div>
    )
}

export default Btns

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './colors/index';


ReactDOM.render(
    <App />,
  document.getElementById('root')
);