reactjs - 智能组件与dumb组件 - 统一样式

标签 reactjs design-patterns components styling

我正在回顾智能组件与dumb组件的概念,总的来说,我认为这是一个很好的设计原则。但样式方面给我带来了一些明显的问题 - 校长建议智能组件不提供任何样式,但如果严格遵守这一点,只有愚蠢的组件提供样式,应用程序看起来不会 不相交/不均匀?该指南对全局样式表有什么发言权吗?

最佳答案

认为智能组件和愚蠢组件与样式和样式表无关可能会有所帮助,即使您阅读的解释是这样解释的。仅考虑 HTML 和 javascript(无 CSS)。

现在,您的dumb组件应该只包含足够的 javascript/react 代码,以便在您的应用程序中工作。dumb组件' single responsibility是控制组件的 HTML 组成或表示。这就是为什么有些人称其为 presentation component .

为了继续保持简单:您的智能组件应该执行与该特定组件相关的所有其他操作,以及该组件的特定职责,与该组件的实际 HTML 无关。这包括以下内容:

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

总而言之,我们应该在一个文件(智能组件)中包含业务逻辑,该文件生成一个对象(props),该对象被传递到其 HTML 模板对应项(dumb组件),以便呈现一个功能齐全的组件。

Smart components -- Do stuff to and with various things and stuff. Generate a viewmodel/props object and pass it to dumb component.

Dumb components -- Render html with object passed from smart component.

这不是唯一的方法,只是我一直在思考问题的方法。希望对您有所帮助!

关于reactjs - 智能组件与dumb组件 - 统一样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43713293/

相关文章:

delphi - 新的自定义组件导致 IDE 崩溃

javascript - 为什么表格列表中有缩进?

javascript - React 功能组件中的 Prop 名称

javascript - React 错误 - 无法读取未定义的属性 'state'

java - 如何为另一个类创建代理类而不重复所有功能

design-patterns - 使用 sed 或 awk 查找并追加文件中具有相同 ID 的行

reactjs - react this.props 未定义或空对象

javascript - 动画 : `useNativeDriver` was not specified issue of ReactNativeBase Input

javascript - 根据您的经验,React 的最佳 UI 框架(例如 Material UI 或其他)?

c# - 哪些用例场景最适合发布/订阅模式?