我正在回顾智能组件与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/