React 中的 context使用方法

最新推荐文章于 2024-04-29 00:09:14 发布

多乐_π

最新推荐文章于 2024-04-29 00:09:14 发布

阅读量675

点赞数

文章标签： react.js 前端前端框架

本文链接：https://blog.csdn.net/weixin_45481456/article/details/131635479

版权

什么是上下文？

全局变量就是全局的上下文，全局都可以访问到它；上下文就是你运行一段代码，所要知道的所有变量。

三大件

React.createContext(): context 的初始化
provider: 提供context的父组件，用来包裹需要context的子组件的
子组件获得context的方法
代码如5：

//1.要先创建createContex
export const UserContext = React.createContext(defaultValue);


//2.Provider 指定使用的范围

render() {
    return (
      <UserContext.Provider value={this.state} >
        {this.props.children}
      </UserContext.Provider>
    );
  }






//最后在子组建使用

import { withContext } from "../../contexts";
import { UserState, UserContext } from "../../contexts/user";

class TestComponent extends React.Component<UserState, State> {



}

export default withContext(UserContext)(TestComponent);