智能与哑巴组件 - 统一样式

Question

我正在回顾Smart与Dumb Components的概念，总的来说，我认为它是一个优秀的设计主体。但是样式方面对我来说引出了一些明显的问题 - 校长建议智能组件不提供任何样式，但如果严格遵守这一点，只有愚蠢的组件提供样式，那么app 看起来不相交/不统一？指南对全球样式表有什么发言权吗？

Answer 1

考虑与样式和样式表无关的Smart和哑组件可能会有所帮助，即使这是您阅读的解释如何解释它。想想智能和愚蠢的组件，只要HTML和javascript（没有CSS）。

现在，您的哑组件应该只包含足够的javascript / react代码才能在您的应用中运行。愚蠢的组件＆＃39; single responsibility用于控制组件的HTML组合或表示。这就是为什么有些人称之为presentation component。

要继续保持简单：您的智能组件应该执行与该特定组件相关的所有其他操作，以及该组件的特定职责，该操作与该组件的实际HTML无关。这包括：

• 将状态映射到演示组件的属性
• 将操作调度程序映射到表示组件的属性
• 创建任何自定义状态，事件处理程序或其他muck。
• 使其响应和正确交互所需的组件的其他业务逻辑
• 无论需要什么其他代码来确保将正确的viewModel＆＃39;或有限的属性集传递给表示组件，以便该表示组件能够正确显示和运行。

总而言之，我们应该在一个文件（智能组件）中具有业务逻辑，该文件生成单个对象（props），并传递给它们的HTML模板对应物（哑组件）以呈现功能完整的组件。

  

智能组件 - 为各种事物和东西做些什么。生成一个viewmodel / props对象并将其传递给哑组件。

     

哑组件 - 使用从智能组件传递的对象渲染html。

这不是唯一的方式，只是我一直在思考的事情。我希望它有所帮助！