在React中解耦UI组件

Question

我是一个新的反应，但还没有找到合适的解决方案，我的第一个问题在工作中。

特定的上下文是由几个其他组件组成的导航组件，它们一起是一个可重新分发的单元，可作为一个整体独立测试。

该组件的用例是有时使用React媒体查询在桌面模式下呈现它，有时在移动中呈现-在这种情况下，它需要用弹出行为来装饰。

因此，我希望将导航组件从必须了解弹出按钮中解耦出来。关于“告诉不要问”的原则或事件驱动，我希望能够通知家长导航已经改变，并根据这个组件的实现方式做出相应的响应(在移动设备中，需要隐藏弹出按钮，在桌面中没有弹出按钮装饰器)。

我研究了redux-ui，这是一个使用注释的很好的语法糖，但当它试图在状态层次结构中设置的属性不存在时，它就会失败。此外，这打破了解耦模型。

我意识到我在这里有点抽象，但是有没有人可以推荐我如何处理这个问题呢？我怀疑一个可能的解决方案可能涉及到没有由装饰包装器强加的层次结构(is-a)，而是具有-弹出功能，但希望在这方面有行业经验。

谢谢

Answer 1

有几种方法可以处理这个问题。最简单的方法就是完全用CSS完成。让组件的所有HTML总是在组件中，只有CSS才会知道移动端或非移动端。

或者，你可以在应用程序加载时设置一个全局状态，告诉应用程序它是在移动设备上还是在桌面上，然后将其传递给任何相关的组件。这种方法可能有点麻烦，因为“移动”和“桌面”实际上只是“小屏幕”和“大屏幕”，因此，当用户正在使用应用程序时，这种情况可能会改变(例如，改变屏幕大小)。因此，您必须使用一群不断监听窗口大小调整事件的侦听器来跟踪所有这些事件。

在这里，最简单的解决方案似乎是纯CSS。