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

Question

我正在使用组件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", options: [{ label: 'sub', value: 'sub' }, { label: 'sub', value: 'sub' }] },   { id: 5, label: "3", options: [] } ];有些类别没有项目（标签 3）。选择组件不显示这样的类别，我该如何解决？我需要显示没有元素的类别名称。在此处输入图像描述

Answer 1

如果没有嵌套选项，则需要删除该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", options: [{ label: 'sub', value: 'sub' }, { label: 'sub', value: 'sub' }] },

      { id: 5, label: "3", options: [] }

    ].map(category => {

      if (category.options.length === 0) return {id: category.id, label: category.label};

      return category;

    });

编辑： 如果你想让它显示为类别，那么你必须在选项中至少有一个元素。因此，在选项中添加一个元素并将其禁用。要做到这一点

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

const transformedDataWithSubItems = [

 {

   id: 1,

   label: '1',

   options: [

     { label: 'sub', value: 'sub' },

     { label: 'sub', value: 'sub' },

   ],

 },

 {

   id: 3,

   label: '2',

   options: [

     { label: 'sub', value: 'sub' },

     { label: 'sub', value: 'sub' },

   ],

 },

 { id: 5, label: '3', options: [] },

].map((category) => {

 if (category.options.length === 0) {

   return { ...category, options: [{ label: 'No sub category', disabled: true }]};

 }

 return category;

});

添加isOptionDisabled道具以选择组件。

 <Select

   options={transformedDataWithSubItems}

   value={selectedItem}

   onChange={handleChange}

   isClearable={isClearable}

   placeholder={placeholder}

   isOptionDisabled={(option) => option.disabled}

 />

见例子