Javascript 层次视图中的状态传播

因此，我开始在行业环境中学习Typescript+React（我以前使用过咖啡、主干、木偶和其他一些工具的混合物），我想知道在状态转移方面处理层次视图的惯用方法是什么

例如，让我们假设我正在尝试制作一张卡，该卡将放置在某个仪表板上。该卡由标题区域和内容区域组成。标题区域有一个用于标题/副标题的区域，以及一个用于可在卡片上执行的操作的区域

现在，让我们假设有一些对象存在渲染卡所需的状态。什么是把国家传给孩子们的最好方式？为了举例说明，让我们假设我有以下内容

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

按照我所知道的方法，传递一个大的

选项

对象，这个对象拥有整个层次结构所需的一切，让每个子对象获取它想要的内容并附加它想要的内容。在这种情况下，这将有效地展平有状态对象并抓取查询以推入

道具中。例如

向下传递带有状态的对象，以便孩子们可以获取他们需要的东西<代码>

不是将所有内容都展平，而是将属性组传递到孩子们期望的

道具中。例如
。这似乎很快就会崩溃，因为这样一来，父节点需要知道每个子节点的确切形状
props
对象<代码>

完全放弃层次概念，创建简单的基本组件，然后视图需要手动将它们缝合在一起。这使得传递状态变得很简单，因为它实际上是视图->所有组件，但是没有好的抽象可以帮助向组件和其他东西添加新特性

---

也许（可能）在前端开发和总体反应方面，我缺少一些基本的东西。

在您描述的情况下，我倾向于将必要的对象作为道具传递给孩子们（选项2）。我想说，如果您有大量对象要传递，那么选项1或3可能更可取，而选项4由于您提到的抽象性缺失，因此不太吸引人。

在您描述的情况下，我倾向于将必要的对象作为道具传递给孩子们（选项2）。我想说的是，如果您有大量的对象要传递，那么选项1或3可能更可取，而选项4由于您提到的抽象性的丧失而不太吸引人