在react中实现多个面板

在react中实现多个面板

由于业务上的需求，需要在一个页面中同时打开多个展示信息的面板，且每个面板的状态是独立的，并且面板上展示出的信息也是可控的。

需求

需求：创建一个配置面板，其中包含多个类别，每个类别都有一组属性和多媒体配置。在处理类别切换时，发现当不同类别的属性中存在相同名称的属性时，控制一个类别的显示会影响到另一个类别的显示。

首先，我们删除多余的 categoryProperties 定义，然后统一使用 selectedCategoryProperties 状态变量来存储属性。这样，在处理类别切换时，我们只需检查是否已存在选定类别的属性，如果不存在，则设置它们。

const [selectedCategoryProperties, setSelectedCategoryProperties] = useState({});
​
const handleCategoryChange = (e) => {
  const category = e.target.value;
  setSelectedCategory(category);
  setContent(true);
​
  if (!selectedCategoryProperties[category]) {
    const properties = classData.find((item) => item.id === category)?.properties;
    setSelectedCategoryProperties({
      ...selectedCategoryProperties,
      [category]: properties,
    });
  }
};

接下来，我们更新属性面板的相关代码，确保正确获取选定类别的属性列表。

const categoryProperties = selectedCategory
  ? selectedCategoryProperties[selectedCategory]
  : [];

随后，我们需要在属性面板的状态更新函数中，使用正确的属性列表进行处理。

const handleShowPropertiesPanel = (e) => {
  if (selectedCategory) {
    setCategories((prevCategories) =>
      prevCategories.map((prevCategory) => {
        if (prevCategory.id === selectedCategory) {
          return {
            ...prevCategory,
            panelState: e.target.checked,
            properties: {
              ...prevCategory.properties,
              [e.target.name]: e.target.checked,
            },
          };
        }
        return prevCategory;
      })
    );
  }
};

最后，确保在属性面板中正确显示属性列表。

{content && (
  <div className="property_content">
    {categoryProperties.map((propertyName) => (
      <Checkbox
        key={propertyName.name}
        checked={displayedProperties.includes(propertyName.name)}
        onChange={(e) =>
          handlePropertyChange(propertyName.name, e.target.checked)
        }
      >
        {propertyName.name}
      </Checkbox>
    ))}
  </div>
)}

通过删除多余的状态定义，解决了多个状态和组件交互引发的状态冲突问题。