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}/>;

日历组件声明＆amp;导入

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

话虽如此，是一个设施，用于打击一个洞＆＃34; （可以这么说）在组件树中，允许子组件访问树中较高层的数据：Context

但是，Context通常被认为是一种高级功能，仅在非常特殊的情况下使用，而另一种解决方案是不可行的。

从文档页面：

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

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

list($url, $expires) = $client->createTemporaryDirectLink("/".$destination);
header("location: $url");

然后在树下的某个子组件中，告诉该组件您想要访问哪些Context属性：

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

然后可以通过class ChildComponent extends Component { contextTypes: { color: React.PropTypes.string }, ... }属性（例如this.context）访问这些属性。

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

1 个答案: