Как я могу создать вложенные группы опций в React Select (V2)?

В React-Select V2 мы можем создавать группы опций, передавая параметр options следующим образом:

options = [
    { label: 'Group', options: [
        { label: 'Option 1', value: '1' },
        { label: 'Option 2', value: '2' }
    ]}
]

Мне нужно пройти еще один слой глубже, например:

options = [
    { label: 'Group', options: [
        { label: 'Option 1', value: '1' },
        { label: 'Option 2', options: [
            { label: 'Option 2-a', value: '2a' },
            { label: 'Option 2-b', value: '2b' },
        ]}
    ]}
]

Что отобразит варианты «Вариант 2-а» и «Вариант 2-б» в группе «Вариант 2». Приведенный выше подход не работает по умолчанию, поэтому я хочу знать, есть ли способ создавать вложенные группы в React-Select V2.

Это интересный вариант использования, который, как мне кажется, в настоящее время не поддерживает React-Select. Хотя было бы отличным запросом функции.

— 02.11.2018 20:01

согласился с @ Steve-Cutter-Blades, вам следует сделать запрос функции. Как и в V2, группы были реализованы, можно было бы доделать

— 02.11.2018 21:21

Эта проблема была запрошенной функцией для response-select и теперь реализована в это PR. Вы можете найти рабочий пример здесь codeandbox.io/s/react-codesandboxer-example-8xxyx?file=/…

— 23.07.2020 09:11

javascript reactjs react-select

02.11.2018 14:56

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

9 373

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Для всех, кто приходит сюда с аналогичной потребностью, я реализовал этот рекурсивный обходной путь.

const renderNestedOption = (props, label, nestedOptions) => {
  const {
    cx,
    getStyles,
    innerProps,
    selectOption,   
  } = props;

  // Will be applied to nested optgroup headers 
  const nestedLabelClassName = cx(
    css(getStyles('groupHeading', props)),
    { option: true },
    'nested-optgroup-label',
  );    

  return (
    <div className = "nested-optgroup">
      <div className = {nestedLabelClassName}>
        {label}
      </div>
      {nestedOptions.map((nestedOption) => {
        if (nestedOption.options) {
          // Read below
          // Read above
          return renderNestedOption(props, nestedOption.label, nestedOption.options);
        }

        const nestedInnerProps = innerProps;
        nestedInnerProps.onClick = () => selectOption(nestedOption);
        return (
          <div className = "nested-optgroup-option" key = {nestedOption.value}>
            <components.Option {...props} innerProps = {nestedInnerProps}>
              {nestedOption.label}
            </components.Option>
          </div>
        );
      })}
    </div>   
  ); 
};

const Option = (props) => {
  const {
    children,
    data,
  } = props;
  const nestedOptions = data.options;

  if (nestedOptions) {
    const label = data.label;
    return renderNestedOption(props, label, nestedOptions);
  }

  return (
    <components.Option {...props}>
      {children}
    </components.Option>
  );
};

Затем в выбранном компоненте замените компонент Option на только что созданный пользовательский компонент Option.