javascript - ReactJS 和父/子组件 : How do I build out this conceptual calendar?

Question

我正在研究一个 ReactJS 项目，一个日历作为我所追求的概念的示例，其中要显示所需的行为:

January 1, 2016
  Activity 1
  Activity 2

January 2, 2016
  Activity 3

January 4, 2016
  Activity 4
  Activity 5

January 8, 2016
  Activity 6

换句话说，有趣的是，标题的日期除了简单的CSS之外，还打算在一个条目之前显示一次，在第一个条目之前显示一天，然后在第一个条目上方不显示一个一天。

Facebook/React/Flux 有效地向共享可变状态宣战，一个明显但错误的方法是通过共享可变状态来解决这个问题。什么是更好或最好的方法来处理上面的内容，其中一个子组件应该根据其自身状态以外的更多内容进行不同显示。这可能不需要共享可变状态，但我看不出最惯用的方法是什么。

--澄清--

@SeanO 对这个问题的第一条评论提供了(我相信是正确的)解决问题类型的算法。几年前，我在一个漂亮、笨拙的 Perl CGI 上做了类似的事情。

但我真正要寻找的并不是什么类型的算法在这里是合适的，而是如何在 ReactJS 中适本地实现它。

--补充说明--

我在查看您的解决方案后提出的一个问题:如前所述，它适用于静态数据。我感兴趣的包括显示 UI 的变化，不仅是因为“明天”变成了“今天”并且从显示中拉出现任者，还包括人们可以向日历添加新数据或以其他方式更改它的东西。使用随附的工具可以很容易地保留用户发起的更改，但我在这里想知道。答案是“做同样的事情，但将所有可变的东西都移到状态”，还是采用不同的方法合适？

根据我目前的理解，我可以完成并实现它，也许很糟糕，但在这里我想知道哪种解决方案真正获胜。 @WiktorKozlik 在他的回答中的开场白正是我想知道的:如果一个组件需要知道的不仅仅是它接收到的数据来呈现自己，那么这表明该组件有问题。

谢谢，

Answer 1

如果一个组件需要知道比它接收到的数据更多的信息来呈现自己，那么这表明该组件有问题。我想知道您是否尝试将组件与您拥有的数据(事件)的形状相匹配，而不是从 UI 设计中派生组件结构。

例如，用如下结构表示 UI 可以让您考虑每个组件需要什么数据，而无需担心算法。

<Calendar activities={...}>
    <CalendarDay day="2016-01-01" activities={[activity1, activity2]}>
        January 1, 2016
        <Activity activity={activity1}>
            Activity 1
        </Activity>
        <Activity activity={activity2}>
            Activity 2
        </Activity>
    </CalendarDay>
    <CalendarDay day="2016-01-02" activities={[activity3]}>
        January 2, 2016
        <Activity activity={activity3}>
            Activity 3
        </Activity>
    </CalendarDay>
    ...
</Calendar>