在React中,祖父母的财产可以由孙子访问,而父母不会将其传递下去吗？

Question

我目前正在研究我的第一个React项目,我遇到了在组件之间传递数据的问题.我正在使用此库日历小部件,以根据列表中的选定项目设置不同的日期.

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

在这个结构中,我有四个在我的树中的交互组件:

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

我目前正在从顶级组件(组件A)的列表(组件B)中存储所选项目的数据.我想要传递数据的组件是组件D.我想要做的是创建一个状态并将值传递给C然后传递给D.不幸的是,C是库中的日历组件,我无法真正操作.

因为我需要D中访问B中的选择所生成的对象而不能操作C,有没有办法在子组件的头部传递值？

代码片段:

如何在A中调用组件C(日历),同时也传入组件D(dayComponent).

<Calendar dayComponent={DayComponent}/>;

日历组件声明和导入

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

    Calendar = ReactWidgets.Calendar;
});

Day组件返回日历日的样式.

 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的工作方式.从上到下反应发送道具,父母将属性传递给他们的孩子.这个想法是一个组件不应该关心它的呈现位置,或者只要为它设置的道具是有效的.

话虽这么说,有是在组件树"打孔"(这么说)的设施,以允许子组件从得更高树访问数据:上下文

但是,Context通常被认为是一种高级功能,仅用于另一种解决方案不可行的特定情况.

从文档页面:

注意:上下文是一种高级实验性功能.API可能会在将来的版本中发生变化.大多数应用程序永远不需要使用上下文.特别是如果你刚开始使用React,你可能不想使用上下文.使用上下文会使您的代码更难理解,因为它会使数据流不太清晰.它类似于使用全局变量通过应用程序传递状态.如果必须使用上下文,请谨慎使用.

我们的想法是在您的顶级组件中定义要提供的Context属性,然后返回一个返回Context数据的方法:

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

然后在树下某处的子组件中,告诉该组件您要访问哪些Context属性:

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

然后可以通过this.context属性(this.context.color例如)访问这些属性.