在 React 中，孙子可以访问 grandparent 的属性而无需 parent 将其传递下去吗？

Question

我目前正在处理我的第一个 React 项目，我遇到了在组件之间传递数据的问题。我正在使用这个库日历小部件，以便根据列表中的所选项目设置不同日期的样式。

https://github.com/vazco/meteor-universe-react-widgets

我的结构树中有四个交互组件：

-----A-----
|         |
C         B
|
|
D

我目前正在将我的顶级组件（组件 A）中选定项目的数据存储在列表（组件 B）中。我想将数据传递到的组件是组件 D。我想做的是创建一个状态并将值传递给 C，然后再传递给 D。不幸的是，C 是我无法真正操作的库中的日历组件。

因为我需要由 B 中的选择生成的 object 被 D 访问而不能操作 C，有没有办法通过 child 组件的头部传递值？

代码片段：

如何在 A 中调用组件 C（日历），同时还传入组件 D（dayComponent）。

<Calendar dayComponent={DayComponent}/>;

日历组件声明&导入

System.import('{universe:react-widgets}').then(ReactWidgets => {

    Calendar = ReactWidgets.Calendar;
});

日期组件 returns 日历日的样式。

 DayComponent = React.createClass({
  render() {
    var date = this.props.date
      , style = { backgroundColor: date < new Date() && '#F57B7B' }

    return (<div style={style}>
        {this.props.label}
      </div>);
  }
})

Answer 1

不是道具，不是。这不是 React 的工作方式。 React 以 top-down 方向发送道具，parents 将属性传递给它们的 children。这个想法是，只要为它设置的 props 是有效的，组件不应该关心它在哪里呈现，或者通过什么呈现。

也就是说，是组件树中的"punching a hole"（可以这么说）的工具，允许child组件访问来自树中更高层的数据：Context

但是，上下文通常被认为是一项高级功能，仅用于其他解决方案不可行的非常特殊的情况。

来自文档页面：

Note: Context is an advanced and experimental feature. The API is likely to change in future releases. Most applications will never need to use context. Especially if you are just getting started with React, you likely do not want to use context. Using context will make your code harder to understand because it makes the data flow less clear. It is similar to using global variables to pass state through your application. If you have to use context, use it sparingly.

我们的想法是，在您的顶级组件中，您可以定义要提供的上下文属性，然后是 return 上下文数据的方法：

class TopComponent extends Component {
  childContextTypes: {
    color: React.PropTypes.string
  },
  getChildContext: function() {
    return {color: "purple"};
  },
  ..
}

然后在树下方某处的 child 组件中，您告诉该组件您想要访问哪些上下文属性：

class ChildComponent extends Component {
  contextTypes: {
    color: React.PropTypes.string
  },
  ...
}

然后可以通过 this.context 属性（例如 this.context.color）访问这些属性。

在 React 中，孙子可以访问 grandparent 的属性而无需 parent 将其传递下去吗？

In React can properties of grandparents be accessed by a grandchild without the parent passing it down?

javascript

meteor

reactjs

react-jsx

meteor-react