Question

这不是官方 API（yet！），但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

我还发现Dave King的这篇文章有助于理解一些暴露的方法和行为： http://web.archive.org/web/20150319074927/https://www.tildedave.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

假设您需要将道具从顶级父母传递给孩子。您需要将其设置为“直接父母”和“间父母”的道具。如果是2种方式，则需要同时通过两种方式传递道具。

上下文可让您绕过此操作，并将数据直接从顶级父母传递给孩子

当多个孩子需要同一个道具但每个孩子都被嵌套时，这将变得更加有用

this.context如何在React中运行？

3 个答案: