制作响应组件时,您将它分成两个组件?

时间:2017-07-17 16:10:59

标签: html css reactjs

我意识到这个问题没有一个答案,而且一如既往,“这取决于”。欢迎所有的讨论,以及专业,经验为基础的投入,它赞赏!

你在什么时候将一个组件分成两个组件 - 一个用于移动设备尺寸,一个用于桌面尺寸,VS在一个组件中有很多复杂的CSS和“条件”HTML?

我只是为一个网站制作一个导航栏(令人兴奋!),桌面导航栏非常简单。它可能是一个愚蠢的功能组件。移动导航栏添加了一些HTML和子组件,调整大小,重新格式化,需要打开/关闭状态等。

为了调试和维护,似乎移动设备为桌面版增加了太多的复杂性,桌面版似乎在移动代码中没有意义。在同一个文件中只有很多CSS和HTML变得不那么简单,两种截然不同的行为会分散注意力。

但是为了性能,组件安装等,将这个与两个孩子分成容器标题并为React添加额外的工作将是一种牺牲。

我很好奇,根据您的经验,您之前遇到过这个问题吗?你是怎么决定解决它的?为什么?你什么时候分手呢?您是否更喜欢粒度组件的清晰度,或者在一个位置具有所有CSS和HTML的清晰度?谢谢!

1 个答案:

答案 0 :(得分:1)

好吧,因为你正在使用React,你可以轻松地检查它是移动的还是更大的移动设备,并且包含你需要的任何一个,如果你需要多个导航,最好只安装你需要的那个。

但我又想知道你是怎么在移动设备上添加许多东西/物品的,但在台式机上你是如此简单? 通过一次或两次点击可以获得所有内容,这不是导航点吗?

如果在移动设备上需要这么复杂的导航,那么在桌面上也可能需要更复杂的导航:)

不要误会我的意思我现在和你一样在同一个地方但是这一切都回到了你希望你的客户点击什么? 如果仅在少数链接上进行转换,则无需进行大型复杂的移动导航,只需确保用户可以访问他们可能需要的所有内容。

毕竟,您可以轻松创建一个搜索表单,以帮助您减少移动设备导航所需的数据。

不是说我喜欢在桌面上进行大量导航,但如果在移动设备上有必要,我觉得它可能也在桌面上。