Javascript 在React中解耦UI组件
我是一个新的反应，但还没有找到一个合适的解决方案，我的第一个问题的工作 特定的上下文是一个导航组件，该组件由几个其他组件组成，它们共同构成一个可再发行单元，可作为一个整体模块进行独立测试 该组件的使用案例有时是使用React媒体查询在桌面模式下渲染，有时是在移动模式下渲染——在这种情况下，它需要用弹出行为装饰 因此，我想将导航组件与了解弹出按钮分离。关于“告诉-不要问”原则或事件驱动，我希望能够通知家长导航已更改，并根据此组件的实现方式做出相应的响应（在移动设备中，弹出按钮需要隐藏，在桌面上没有弹出按钮装饰） 我看了ReduxUI，它是一个很好的语法糖，使用注释，但是当它试图在状态层次结构中设置的属性不存在时，它就会崩溃。此外，这打破了解耦模型 我意识到我在这里有点抽象，但有人对我如何处理这个问题有建议吗？我怀疑一个可能的解决方案可能包括没有装饰包装器强加的层次结构（is-a），而是有一个弹出功能，但欢迎业界在这方面的经验Javascript 在React中解耦UI组件,javascript,reactjs,redux,react-jsx,react-redux,Javascript,Reactjs,Redux,React Jsx,React Redux,我是一个新的反应，但还没有找到一个合适的解决方案，我的第一个问题的工作 特定的上下文是一个导航组件，该组件由几个其他组件组成，它们共同构成一个可再发行单元，可作为一个整体模块进行独立测试 该组件的使用案例有时是使用React媒体查询在桌面模式下渲染，有时是在移动模式下渲染——在这种情况下，它需要用弹出行为装饰 因此，我想将导航组件与了解弹出按钮分离。关于“告诉-不要问”原则或事件驱动，我希望能够通知家长导航已更改，并根据此组件的实现方式做出相应的响应（在移动设备中，弹出按钮需要隐藏，在桌面上没有
谢谢有几种方法可以解决这个问题。最简单的方法是完全使用CSS。将组件的所有HTML都放在组件中，只有CSS才知道是否有mobile 或者，你可以设置一个全局状态，当应用程序加载时，它会告诉应用程序它是在移动还是在桌面上，然后将其传递给任何相关组件。这种方法会有点痛苦，因为“移动”和“桌面”真的只是“小屏幕”和“大屏幕”，因此，当用户在使用应用程序的时候，这可能会发生变化（例如，改变屏幕大小）。因此，您必须通过一群侦听器来跟踪所有这些，这些侦听器不断地侦听窗口大小调整事件
这里最简单的解决方案似乎是纯CSS 有几种方法可以解决这个问题。最简单的方法是完全使用CSS。将组件的所有HTML都放在组件中，只有CSS才知道是否有mobile 或者，你可以设置一个全局状态，当应用程序加载时，它会告诉应用程序它是在移动还是在桌面上，然后将其传递给任何相关组件。这种方法会有点痛苦，因为“移动”和“桌面”真的只是“小屏幕”和“大屏幕”，因此，当用户在使用应用程序的时候，这可能会发生变化（例如，改变屏幕大小）。因此，您必须通过一群侦听器来跟踪所有这些，这些侦听器不断地侦听窗口大小调整事件
这里最简单的解决方案似乎是纯CSS 使用vanilla React，要将更改反馈给父级，通常需要将父级的回调作为道具传递给子级，并在适当时从子级调用。这在您的情况下不起作用吗？使用vanilla React，要将更改反馈给家长，您通常会将家长的回调作为道具传递给孩子，并在适当的时候从孩子那里调用。这在您的情况下不起作用吗？我想最终某个父级上的处理程序会处理一些CSS，但也会修改应用程序的行为。因此，我正在寻找如何将我的组件与实现解耦。在传统的体系结构中，我会使用事件。我在React中发现，组件之间的处理程序显式地绑定了它们，但我如何通信状态的变化呢？您可以只向nav添加一个道具，将其设置为
mobiledesktopmobiledesktop