我意识到这个问题没有唯一的答案，而且一如既往，“这取决于”。欢迎所有讨论，并感谢专业的、基于经验的输入!
在什么时候将一个组件分成两个组件 — 一个用于移动设备尺寸，一个用于桌面尺寸，VS 在一个组件中有很多复杂的 CSS 和“条件”HTML？
我刚刚为网站制作了一个导航栏(令人兴奋!)，桌面导航栏非常简单。它可以是一个愚蠢的功能组件。移动导航栏添加一些 HTML 和子组件、调整大小、重新格式化、需要打开/关闭状态等。
为了调试和可维护性，移动版似乎给桌面版增加了太多的复杂性，而桌面版在移动代码中似乎没有意义。只是在同一个文件中有很多 CSS 和 HTML，两种截然不同的行为相互干扰，变得不那么直接了。
但为了性能、组件安装等原因，将其分解为包含两个子项的容器 header 并为 React 添加额外的工作将是一种牺牲。
我很好奇，根据您的经验，您以前遇到过这个问题吗？你决定如何解决它？为什么？你在什么时候打破它？您更喜欢颗粒组件的清晰度，还是将所有 CSS 和 HTML 集中在一处的清晰度？谢谢!
最佳答案
因为您使用的是 React，所以您可以轻松地检查它是移动的还是比移动更大的，并包含您需要的任何一个，如果您需要多个导航，最好只安装您需要的那个。
但我又想知道为什么您在移动设备上的导航中添加了那么多东西/元素，但在桌面设备上却保持如此简单？ 导航的重点不是只需单击一两次即可访问所有内容吗？
如果在移动设备上需要如此复杂的导航，那么在桌面上也可能需要更复杂的导航才有意义:)
请不要误会我的意思，我和你现在在同一个地方，但这一切都回到了你希望你的客户点击什么？ 如果转换只发生在几个链接上，则不需要庞大复杂的移动导航，只需确保用户可以访问他们可能需要的所有内容即可。
毕竟，您可以轻松创建一个搜索表单，帮助您减少移动设备导航所需的数据。
并不是说我喜欢桌面上的巨大导航，但如果在移动设备上有必要，我觉得它也可能在桌面上。
关于html - 在制作响应式组件时，您在什么时候将其拆分为两个组件？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45148934/