页面布局在哪里适合react（redux）表示与容器模式？

Question

我读过丹·阿布拉莫夫关于Presentational and Container Components的文章。在其中，他解释了一种模式，您可以将组件分离为处理事物外观的组件，以及处理事物如何工作的组件。

我正在尝试根据这种架构构建我的反应应用程序，但遇到了问题。假设我有一个页面UserProfile。它包含一组表示组件，需要各种数据源。我需要定义此页面的外观，我将其称为UserProfile。

作为演示组件的页面

然后我是否构建UserProfile组件作为表示组件，并通过将每个表示组件包装在适当的容器中来连接所有数据源？

<UserProfile> // presentational
  <AvatarData> // container
    <Avatar /> // presentational
  </AvatarData>
  <CommentData> // container
    <Comments /> // presentational
  </CommentData>
</UserProfile>

因为这不允许单个组件的多个数据源，并且它可能导致容器的代码变得相当重复。

作为容器组件的页面

或者，在redux repo中In the real-world example使用了一种不同的方法，其中容器也定义了一个布局（尽管很简约）。这允许您在一个位置定义页面所需的所有数据源，并允许您为单个组件使用多个数据源。但是，在此组件中定义样式将是禁忌，如果您的页面非常简约，则会起作用，但如果它变得更复杂则会崩溃。

所以我的问题是：使用这种模式时应该如何定义复杂的页面（样式，数据和行为）？

Answer 1

不要过分考虑“容器”和“表现”方面。这是一个有用的区别，但没有严格的规则说明必须以绝对严格的方式拆分组件。在容器组件中放置一些布局和表示渲染是完全没问题的，在表示组件中渲染容器组件是完全没问题的。