context基本使用

飞飞写bug

已于 2022-03-19 20:32:17 修改

阅读量1.6k

点赞数

分类专栏：笔记文章标签： reactjs

于 2022-03-19 20:31:29 首次发布

本文链接：https://blog.youkuaiyun.com/qq_61027269/article/details/123601564

版权

笔记专栏收录该内容

3 篇文章

订阅专栏

这篇博客介绍了如何在React应用中利用Context API进行跨组件的状态管理。首先，创建了一个Context并导出。然后在父组件中导入并用Provider包裹子组件，通过value属性传递数据。子组件可以通过两种方式接收数据：一是使用Consumer组件；二是通过设置contextType静态属性直接访问。这种方式避免了props逐级传递，提高了代码的可维护性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.context.js

作为文件之间传递的一个中间的文件，可以简单的理解为交互的文件

先要生成一个context 并且导出供组件使用

import react from 'react'

const Context = react.createContext()

export default Context;

2.父组件

在父组件中导入创建好的context.js
给需要数据的子组件用<context.Provider value={{name:'feifei'}}></ context.Provider> 包裹
并且通过value传值

import React, { Component } from 'react';
import context from './../../context/index'
import Son from './son.js'

class Father extends Component {
    state = {
        data:'1111'
    }
    updateName= ()=>{
        this.setState({data:'feifei'})
    }
    render() {
        return (
            <div onClick={this.updateName}>
                这是父组件{this.state.data}
                <context.Provider value={{name:this.state.data}}>
                    <Son></Son>
                </context.Provider>
            </div>
        );
    }
}

export default Father;

3.子组件(方式一)

在子组件中也需要导入创建好的context.js
并且在需要的子组件中用context.属性获取数据
在子组件中要用回调的方式接收数据

中间不管经过多个组件只要是子组件都可以使用Consumer包裹接收数据

import React, { Component } from 'react';
import context from './../../context/index.js'

class Son extends Component {
    render() {
        return (
          <context.Consumer>
            {context => {
              return (
                <div>
                  name:{context.name}
                </div>
              )
            }}
          </context.Consumer>
        );
      }
    }


export default Son;

4.子组件(方式二)

子组件也可以采用另外一种方式获取context上的数据

使用contextType的方式

import React, { Component } from 'react';
import context from './../../context/index.js'

class Son1 extends Component {
    static contextType = context;
    render() {
        return (
            <div>这是son1{this.context.name}</div>
        )
      }
    }


export default Son1;