React动态生成关联依赖Select组件的最优实现方案咨询

一、优化后的数据结构 #

为支持Select组件的依赖联动，需给分类和选项添加关联标识，在保持扁平结构的同时明确层级依赖，便于动态扩展和渲染：

const categories = [
  {
    name: "project",
    label: "Project",
    required: true,
    options: [
      { label: "Project A", value: "02" },
      { label: "Project B", value: "01" }
    ]
  },
  {
    name: "subproject",
    label: "Sub Project",
    required: true,
    parent: "project", // 指定依赖的父分类名称
    options: [
      { label: "Sub Project A-01", value: "021", parentValue: "02" }, // 关联父选项的value
      { label: "Sub Project A-02", value: "022", parentValue: "02" },
      { label: "Sub Project B-01", value: "011", parentValue: "01" }
    ]
  },
  // 可扩展多层级联动示例
  {
    name: "subsubproject",
    label: "Sub Sub Project",
    required: false,
    parent: "subproject",
    options: [
      { label: "Sub Sub A-01-01", value: "0211", parentValue: "021" },
      { label: "Sub Sub A-02-01", value: "0221", parentValue: "022" },
      { label: "Sub Sub B-01-01", value: "0111", parentValue: "011" }
    ]
  }
];

结构优势： #

• 扁平结构易维护，适配后端返回自定义分类的动态加载场景
• 每个分类明确依赖的父分类，每个选项明确关联父选项的值，支持任意层级联动
• 无需修改核心渲染逻辑，仅需扩展分类和选项即可新增联动层级

二、React联动渲染实现 #

通过状态管理选中值，实时过滤子分类选项，同时处理禁用状态和子分类选中值清除逻辑：

import { useState, useMemo } from "react";

const categories = [/* 上述优化后的数据结构 */];

function CategorySelects() {
  // 存储各分类的选中值，key为分类name，value为选项value
  const [selectedValues, setSelectedValues] = useState({});

  const handleSelectChange = (categoryName, value) => {
    setSelectedValues(prev => {
      // 清除当前分类所有子分类的选中值，避免联动残留旧值
      const childKeys = Object.keys(prev).filter(key => {
        const cat = categories.find(c => c.name === key);
        return cat?.parent === categoryName;
      });
      const clearedChildValues = childKeys.reduce((acc, key) => ({ ...acc, [key]: undefined }), {});

      return {
        ...prev,
        [categoryName]: value,
        ...clearedChildValues
      };
    });
  };

  return (
    <div className="category-selects">
      {categories.map(category => {
        const hasParent = !!category.parent;
        const parentSelectedValue = hasParent ? selectedValues[category.parent] : null;

        // 用useMemo缓存过滤后的选项，提升性能
        const filteredOptions = useMemo(() => {
          if (!hasParent) return category.options;
          return parentSelectedValue 
            ? category.options.filter(opt => opt.parentValue === parentSelectedValue)
            : [];
        }, [category.options, hasParent, parentSelectedValue]);

        const options = filteredOptions.map(option => (
          <option key={option.value} value={option.value}>
            {option.label}
          </option>
        ));

        // 父分类未选中时，禁用当前子分类
        const isDisabled = hasParent && !parentSelectedValue;

        return (
          <div key={category.name} className="select-group">
            <label>{category.label}</label>
            <select
              name={category.name}
              required={category.required && !isDisabled}
              disabled={isDisabled}
              value={selectedValues[category.name] || ""}
              onChange={(e) => handleSelectChange(category.name, e.target.value)}
            >
              {/* 添加默认空选项，优化用户体验 */}
              {(!category.required || isDisabled) && <option value="">请选择</option>}
              {options}
            </select>
          </div>
        );
      })}
    </div>
  );
}

export default CategorySelects;

核心逻辑说明： #

1. 状态管理：用selectedValues存储所有分类的选中值，便于跨分类联动判断
2. 选项过滤：根据父分类的选中值，实时过滤当前分类的可选项
3. 禁用控制：父分类未选中时，禁用子分类并取消必填要求
4. 状态清理：父分类切换时，自动清除所有子分类的选中值，避免数据不一致

三、更优的自定义分类实现思路 #

1. 后端适配：后端返回分类数据时直接采用上述扁平结构，前端无需额外转换即可渲染
2. 复杂状态管理：若分类层级多、数据量大，可改用useReducer替代useState，将状态更新逻辑封装到reducer中，提升代码可维护性
3. 动态分类加载：支持用户新增/修改分类时，实时更新categories数组，组件自动重新渲染联动结构
4. 性能优化：对大量分类或选项，可添加虚拟滚动、懒加载等机制，提升渲染效率

内容的提问来源于stack exchange，提问作者Murillo Tavares