如何按数组label_parent分组展示多个MultiSelectText组件？

当然可以用多个<MultiSelectText>组件来实现这种分组展示的需求！这是个非常直观且易维护的方案，我来一步步给你讲具体实现方式：

1. 先对原始数据进行分组处理 #

首先你需要把现有的扁平化数组转换成分组结构，把label_parent为空的项作为分组容器，对应的子项归入各自的分组：

// 在组件的render方法或者useEffect（如果是函数组件）里处理数据
const groupData = () => {
  // 提取所有顶级分组（label_parent为空的项）
  const topLevelGroups = this.props.fields.filter(item => item.label_parent === '');
  // 为每个分组匹配对应的子选项
  return topLevelGroups.map(group => ({
    groupName: group.name,
    groupSorting: group.sorting,
    options: this.props.fields.filter(item => item.label_parent === group.name)
  }));
};

const groupedOptions = groupData();

2. 渲染多个MultiSelectText组件 #

接下来遍历处理好的分组数据，为每个分组渲染一个独立的<MultiSelectText>组件，每个组件只展示对应分组的子选项：

{groupedOptions.map(group => (
  <div key={group.groupName} style={{ marginBottom: '1rem' }}>
    <MultiSelectText
      multiple={true}
      options={group.options}
      onChange={(selected) => this.handleGroupSelection(group.groupName, selected)}
      name={`fields_${group.groupName}`}
      label={group.groupName}
      items={this.getSelectedItemsForGroup(group.groupName)} // 这里根据组件逻辑传入选中项
      sorting="sorting"
    />
  </div>
))}

3. 处理多组件的选中状态 #

因为现在是多个组件，你需要维护每个分组的选中状态，最后可以合并成一个统一的数组（和原组件的输出格式一致）：

// 初始化状态保存各分组的选中项
state = {
  groupSelections: {}
};

// 处理单个分组的选择变化
handleGroupSelection = (groupName, selectedItems) => {
  this.setState(prevState => ({
    groupSelections: {
      ...prevState.groupSelections,
      [groupName]: selectedItems
    }
  }), () => {
    // 合并所有分组的选中项，得到和原组件一致的数组结构
    const allSelected = Object.values(this.state.groupSelections).flat();
    // 调用原来的handleChange方法，或者处理合并后的结果
    this.handleChange(allSelected);
  });
};

// 辅助函数：获取指定分组的已选中项（用于items属性）
getSelectedItemsForGroup = (groupName) => {
  return this.state.groupSelections[groupName] || [];
};

额外提示 #

如果你的<MultiSelectText>组件本身支持内置分组的配置（比如通过groupBy属性之类的），那直接用单个组件配置分组会更简洁。但如果组件没有这个功能，用多个组件的方案完全能满足需求，而且逻辑清晰，调试起来也更方便。

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