this.context如何在React中运行？

Question

它不是官方 API(但是!),但context在React mixins中可能非常有用.但是,它的行为和内容对我来说并不完全直观.

内容this.context来自哪里？

(截至撰写本文时,React版本为0.12)

Answer 1

我过早地研究这个,this.context是一组隐式传递给它的子元素而不是显式传递属性的属性.您可以查看React测试套件以了解它们的行为:

https://github.com/facebook/react/blob/0.12-stable/src/core/ tests /ReactCompositeComponent-test.js#L1101

https://github.com/facebook/react/blob/0.12-stable/src/core/ tests /ReactElement-test.js#L100

我还发现本文有助于理解一些暴露的方法和行为:http: //davehking.com/2014/11/15/introduction-to-contexts-in-react-js.html

Answer 2

如果您不介意,我会在React的背景信息中发帖子 https://dlinau.wordpress.com/2015/07/19/take-a-deeper-look-into-context-in-react-js

简而言之,上下文是一个具有属性的对象,这些属性从一个元素隐式传递给它的所有子孙.

要与具有上下文的子组件共享数据/属性,组件通过定义属性childContextTypes来定义上下文中可用的属性名称和数据类型.它还需要定义getChildContext方法,该方法返回上下文中属性的数据值.childContextTypes中的键必须与getChildContext方法返回的对象中的键完全相同.

当子组件想要使用来自父上下文的数据时,它必须首先通过定义属性contextTypes来声明它想要显式使用的内容.contextTypes是一个对象,指定要使用的属性的名称和类型.

Answer 3

文档有最好的信息。 http://reactjs.org/docs/context.html

简而言之，这就是上下文。

Top Parent
  |
  |
  |
Inter Parent
  |
  |
  |
Immediate Parent
  |
  |
  |
Child

假设您需要将一个 prop 从Top Parent传递给Child。您需要将其设置为直接父级和间父级的支柱。如果是双向的，那么 props 需要双向传递。

上下文允许您绕过这个并将数据直接从顶级父级传递到子级

当多个孩子需要相同的道具但每个孩子都是深层嵌套时，这会变得更有用