分层反应视图中的状态传播

Question

所以我开始在一个行业环境中学习Typescript + React（我之前使用过咖啡，Backbone，Marionettejs和其他一些人的混合物），我想知道处理分层视图的惯用方法是什么尊重国家转移是。

例如，让我假装我正在尝试制作一张放在某个仪表板上的卡片。该卡由标题区域和内容区域组成。标题区域有一个Title / subtitle区域，以及一个可以在卡片上完成的动作区域。

现在，让我们说有一些对象可以从中呈现卡片所需的状态。将状态传递给孩子的最佳方法是什么？为了说明，我可以说我有以下

class Report {
    const title: string;
    const subtitle: string;
    const data: any[];
          ...
}

1. 走Backbone方式，我知道传递一个大的options对象，它只包含整个层次结构所需的一切，让每个孩子抓住它想要的东西并附加它想要的东西。在这种情况下，这将有效地展平有状态对象并抓住查询以推入props。例如<DashboardCard title={report.title} ... />

2. 传递状态为down的对象，以便孩子们可以抓住他们需要的东西。 <DashboardCard report={ report }/>

3. 并没有完全展平所有内容，只是传递了捆绑在孩子们所期望的props中的属性组。 E.g <DashboardCard headerProps={ headerProps } ...>。这似乎很快就会崩溃，因为父母需要知道每个子节点props对象的确切形状。 <DashboardCard headerProps={ } contentProps={ }/>
4. 完全废弃层次结构概念，并创建简单的基本组件，然后视图需要手动拼接它们。这使得传递状态变得微不足道，因为它实际上是视图 - ＆gt;所有组件，但是没有很好的抽象可以帮助向组件和其他东西添加新功能。

也许（可能）有一些基本的东西，我在前端开发中缺失并且总体上做出反应。

Answer 1

在你所描述的情况下，我倾向于将必要的物品作为道具传递给孩子（选项2）。我会说如果你有大量的对象可以传递，那么选项1或3可能更可取，而选项4由于你提到的抽象丢失而不太诱人。