美文网首页
【React】—context用法

【React】—context用法

作者: 南慕瑶 | 来源:发表于2017-12-19 17:16 被阅读0次

How To Use Context

不使用context 使用context

By adding childContextTypes and getChildContext to MessageList(the context provider), React passes the information down automatically and any component in the subtree (in this case,Button) can access it by defining contextTypes.

If contextTypes is not defined, then context will be an empty object.

如上代码,组件层级关系:

MessageList -> Message -> Button

父组件设置context:

定义 childContextTypes  getChildContext 。定义后,从这一层开始,所有的子组件都可以拿到定义的context。

子组件使用context:

定义 contextTypes 。定义后,才可以使用父组件中设置的context,否则,子组件读取的this.context将为空对象。

相关文章

  • React中不常用的功能——Context

    React中不常用的功能——Context Context React源码版本16.8 基本用法 跨层级通信 Co...

  • 【React】—context用法

    How To Use Context By adding childContextTypes and getChi...

  • react的context用法

    首先在使用context时使用 getChildContext 吧this.state return出来 然后使用...

  • 父子组件传值的方式

    父组件传值给子组件方式1、props2、context(高级用法)React的上下文-Context3、组件组合(...

  • 2018-08-08

    React 高级指南 React 新版上下文(context) context ?答:上下文(Context) 提...

  • React 两种Context 用法

    第一种 childContextTypes 第二种 React.createContext(default,fn)

  • 疑问汇总

    1. react context是怎样实现 跨组件通信的? 从Context源码实现谈React性能优化[http...

  • react context

    react context React.createContext, Provider(数据提供者), Consu...

  • React 拾遗之 Context

    React 拾遗之 Context React.js 的 context 其实像就是组件树上某颗子树的全局变量 使...

  • react-redux源码解读

    "react-redux": "^5.0.6" redux和react之间的桥梁是react的context,re...

网友评论

      本文标题:【React】—context用法

      本文链接:https://www.haomeiwen.com/subject/xjhiwxtx.html