1

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

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

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

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

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

由于我需要 B 中的选择生成的对象由 D 访问而无法操作 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>);
  }
})
4

1 回答 1

5

不是道具，不是。这不是 React 的工作方式。React 以自上而下的方向发送道具，父母将属性传递给他们的孩子。这个想法是组件不应该关心它在哪里渲染，或者通过什么渲染，只要为它设置的 props 是有效的。

话虽如此，在组件树中有一个“打孔”（可以这么说）的工具，以允许子组件从树的更高层访问数据：上下文

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

从文档页面：

注意：上下文是一项高级和实验性功能。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例如）。

于 2016-01-16T17:11:50.790 回答