在反应选择中显示没有嵌套选项的组的选择组名称

问题描述

我正在使用组件react-select：

    <Select
      options={transformedDataWithSubItems}
      value={selectedItem}
      onChange={handleChange}
      isClearable={isClearable}
      placeholder={placeholder}
    />

transformedDataWithSubItems看起来像这样：

const transformedDataWithSubItems = [
  { id: 1,label: "1",options: [{ label: 'sub',value: 'sub' },{ label: 'sub',value: 'sub' }] },{ id: 3,label: "2",{ id: 5,label: "3",options: [] }
];

某些类别没有项目（标签3）。选择组件未显示这样的类别，我该如何解决？我需要显示不带元素的类别名称。

enter image description here

解决方法

如果没有嵌套选项，则需要删除options属性。

更改{ id: 5,label: "3",options: [] } => { id: 5,label: "3" }

const transformedDataWithSubItems = [
      { id: 1,label: "1",options: [{ label: 'sub',value: 'sub' },{ label: 'sub',value: 'sub' }] },{ id: 3,label: "2",{ id: 5,options: [] }
    ].map(category => {
      if (category.options.length === 0) return {id: category.id,label: category.label};
      return category;
    });

编辑： 如果要使其显示为类别，则选项中必须至少包含一个元素。因此，在选项内添加一个元素并将其禁用。为此

1. 添加{ label: 'No sub category',disabled: true }

const transformedDataWithSubItems = [
 {
   id: 1,label: '1',options: [
     { label: 'sub',],},{
   id: 3,label: '2',label: '3',options: [] },].map((category) => {
 if (category.options.length === 0) {
   return { ...category,options: [{ label: 'No sub category',disabled: true }]};
 }
 return category;
});

1. 添加isOptionDisabled道具来选择组件。

    <Select
      options={transformedDataWithSubItems}
      value={selectedItem}
      onChange={handleChange}
      isClearable={isClearable}
      placeholder={placeholder}
      isOptionDisabled={(option) => option.disabled}
    />
   
   

请参见example