React-context上下文

迈不过友情╰ 2023-07-05 13:09 52阅读 0赞

非父子之间的通信可以通过状态提升的方式来解决，但是当组件嵌套太深时就比较麻烦了，这时可以使用 react 中的上下文来解决（实际开发中使用状态管理工具 redux）

通过 react 的 createContent() 方法创建一个 context（上下文）；这个上下文里面有两个组件 `Provider` 和 `Consumer`

*  Provider：提供者，用于提供数据
 *  Consumer：消费者，使用数据

import React from 'react'
    import ReactDOM from 'react-dom'
    
    // 1. 创建上下文，解构获取 Provider 和 Consumer
    const {  Provider, Consumer } = React.createContext()
    
    class Father extends React.Component { 
      state = { 
        bgc: 'yellowGreen'
      }
      render () { 
        return (
          <div>
            <h1>Father 组件</h1>
            { /* 2. 通过提供者 Provider 中的 value 属性提供数据， 会将该数据传递给消费组件 */}
            <Provider value={ this.state.bgc}>
              <Son />
            </Provider>
          </div>
        )
      }
    }
    
    class Son extends React.Component { 
      render () { 
        return (
          <div>
            <h1>Son 组件</h1>
            <Sun></Sun>
          </div >
        )
      }
    }
    
    class Sun extends React.Component { 
      render () { 
        // 3. 通过消费者 Consumer 使用数据，消费组件内部以一个函数作为子元素；数据就在函数的 value 参数中
        return (
          <Consumer>
            { value => { 
              return (
                <div style={ {  background: value }}>
                  <h1>Sun 组件</h1>
                </div>
              )
            }}
          </Consumer>
        )
      }
    }
    
    ReactDOM.render(<Father />, document.getElementById('root'))

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200215084448951.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ==,size_16,color_FFFFFF,t_70