Redux或简单的React来处理导航

Question

我对React和Redux非常陌生，目前我正试图了解如何通过UI共享状态。

我有一个非常简单的用例。

想象一个有三列的容器：

1. 带有四个按钮的左侧菜单
2. 中心内容部分
3. 包含其他内容的正确容器

当我点击四个按钮中的一个时，我希望发生三件事：

1. 按钮上的类已更新，因此它具有边界
2. 其他按钮上的类会更新，因此如果在删除其边框类之前单击了这些按钮
3. 中间部分的一部分内容将更新。此内容需要从后端(Django Rest(获取数据

以下是我的问题：

1. 我应该将此交互分离为仅UI问题和数据驱动问题，还是用一个状态来处理这两个问题
2. 因为按钮共享一个父组件，但不与中心组件共享，如果我不想在容器的最顶层定义状态，我会更好地使用Redux吗
3. 因为我是新来的，Hooks似乎是我尝试使用钩子而不是类的方式，所以分离组件和容器仍然有意义吗

Answer 1

您可以使用react router dom库来实现您想要的。对于左侧菜单，您可以在css中创建活动类，然后使用react router dom的location.pathname属性检查当前路由，如果是该按钮，则为其设置活动类。对于您的主要部分，您可以在useEffect钩子中获取数据。我认为将数据和UI分离是好的，但对于按钮，我所说的是好的。并且您可以将数据存储在redux中以用于您的主要部分。