react入门—10Context介绍及应用

柔光的暖阳◎ 2022-03-20 05:42 189阅读 0赞

### 1.Context简介 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70][]

### 2.props的弊端  ###

看下面的例子。假如现在在User.js中需要App.js中的theme这个属性，首先将theme传入到Header中，再把theme传入到User中，最后把theme传入到Button中。这样一层一层的传递特别麻烦。Context可以解决这个问题。使用context必须在react16.3以上才能用。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 1][]

### 3.context实例 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 2][]

### 4.编码 ###

App.js

import React, { Component } from 'react';
    import logo from './logo.svg';
    import './App.css';
    import ThemeContext from './theme-context';
    import ThemeBar from './components/ThemeBar';
    // import NameCard from './components/NameCard';
    // import LikesButton from './components/LikesButton';
    // import DigitalClock from './components/DigitalClock';
    // import CommentBox1 from './components/CommentBox1';
    // import CommentBox from './components/CommentBox';
    // import CommentList from './components/CommentList';
    // const tags = ['恐龙','足球小子']
    const themes = {
      light:{
        classnames: 'btn btn-primary',
        bgColor: '#eee',
        color: '#000'
      },
      dark:{
        classnames: 'btn btn-light',
        bgColor: '#222',
        color: '#fff'
      }
    }
    
    class App extends Component {
      constructor(props){
        super(props)
        this.state = {
          // comments:['this is my first reply']
          theme: 'light'
        }
        this.addComment = this.addComment.bind(this)
      }
      addComment(comment){
        this.setState({
          comments: [...this.state.comments,comment]
        })
      }
      changeTheme(theme){
        this.setState({
          theme,
        })
      }
    
      render() {
        // const {comments} = this.state
        return (
          <ThemeContext.Provider value={themes[this.state.theme]}>
            <div className="App">
              <header className="App-header">
                <img src={logo} className="App-logo" alt="logo" />
                <a href="#theme-switcher"
                  className="btn btn-light"
                  onClick={()=>{this.changeTheme('light')}}
                >
                  浅色主题
                </a>
                <a href="#theme-switcher"
                  className="btn btn-secondary"
                  onClick={()=>{this.changeTheme('dark')}}
                >
                  深色主题
                </a>
              </header>
              <ThemeBar />
    
    
    
    
    
      {/*         <LikesButton tags={tags} />
      */}        {/* <NameCard name="viking" number={1233444} isHuman tags={tags}/> */}
              {/* <DigitalClock /> */}
              {/* <CommentList comments={comments}/> */}
              {/* <CommentBox1 commentsLength={comments.length} onAddComment={this.addComment} /> */}
    
            </div>
          </ThemeContext.Provider>
        )
      }
    }
    
    export default App;

ThemeBar.js

import React from 'react'
    import ThemeContext from '../theme-context'
    
    const ThemeBar = ()=>{
        return (
            <ThemeContext.Consumer>
                {
                    theme=>{
                        return (
                            <div
                                className="alert mt-5"
                                style={
       {backgroundColor:theme.bgColor,
                                        color:theme.color}}
                            >
                            样式区域
                            <button className={theme.classnames}>样式按钮</button>
                            </div>
                        )
                    }
                }
            </ThemeContext.Consumer>
        )
    }
    export default ThemeBar

效果，点击上面的按钮，下方区域的背景颜色回跟着改变

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 3][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70]: /images/20220320/1b0e7addb7fc4bd48ec413464170e1d5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 1]: /images/20220320/c2f416394f0741ccae45ec01a20d2d7f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 2]: /images/20220320/d336081275064204a6e204396e759a83.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 3]: /images/20220320/800a1f73983342a6bd77e907fe21e80f.png