使用context实现主题颜色更改

这个小demo分为以下五个文件

index.js 主文件 context的提供者

Page.js 作为中间组件

Paragraph.js和Title.js是context的消费者

context.js 声明定义context,并初始化consumer和provider

////////context.js//////////

import React from "react"
const  ThemeContext = React.createContext()

export const ThemeProvider = ThemeContext.Provider;
export const ThemeConsumer = ThemeContext.Consumer;

///////////Page.js/////////////

import React from 'react'
import Paragrapha from "./Paragraph"
import Title from "./Title"

class  Page extends React.Component{
  render(){
    return(
   <>
  <Title/>
  <Paragrapha/>
  </>
    )
  }
  }
  export default Page //默认导出不需要加{}，不是默认导出要记得加，导入演示如此

/////////Title.js////////////
import React from 'react';

import {ThemeConsumer} from "./context"
class Title extends React.Component{
  render(){
    return(
      <ThemeConsumer>
        {theme=><h1 style={{color:theme}}>title</h1>} //这里的theme就是传入的context
      </ThemeConsumer>
    )
  }
}

export default Title

////Page。js///////

import React from 'react'
import Paragrapha from "./Paragraph"
import Title from "./Title"

class  Page extends React.Component{
  render(){
    return(
   <>
  <Title/>
  <Paragrapha/>
  </>
    )
  }
  }

  export default Page

////////index.js//////////

import { render } from '@testing-library/react';
import React from 'react';
import ReactDOM from 'react-dom';
import {ThemeProvider} from "./context"
import Page from "./Page"

class App extends React.Component{
  constructor(props){
    super(props)
    this.state={
      color:"red"
    }
  }

handleChange=(e)=>{
this.setState({
  color: e.target.value
})
}

  render(){
    return(
<>
      <select onChange={(e)=>this.handleChange(e)}>
        <option value="red"> 红色</option>
        <option value="blue">蓝色</option>
      </select>
    <ThemeProvider value={this.state.color}>
     <Page/>
    </ThemeProvider>
</>
    )
  }
}


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

最终实现效果

选择蓝色选项卡，可以将下面两行文字变成蓝色。