带有嵌套组件和状态管理的ReactJs复杂侧边栏

Question

我正在使用 ReactJs 和 Mui 来实现创建元宇宙的统一项目的门户，我有一个浮动侧边栏，其中包含供用户使用和操作的所有元素和对象。

这是线框图

问题在于这个侧边栏有很多状态和组件需要有条件地渲染（它更像是canva侧边栏） 我的问题是实现这一结果的最佳方法是什么：

如何能够显示分类对象并查看所有对象并操作此侧边栏组件内的对象设置，除了 webgl 的存在之外，它变得越来越复杂

如果您知道遵循的好方法，请帮助我

谢谢！

我尝试了条件渲染，但组件变得复杂，所以我将其分成多个组件。但我需要一种有效的方法来根据之前提供的要求来更改侧边栏的内容

Answer 1

我认为您可以创建一个动态侧边栏组件，它接受一些参数。然后你可以设计一个枚举来呈现选项卡。

const tabEnumList = [
  { 
    name: "Furniture",
    items: [
      {
        icon: <TableIcon />
        name: "Table"
      }
    ]
  },
  
]

您可以添加更多类似该结构的项目和选项卡，然后将其作为参数放入侧边栏组件中