Ошибка консоли Antd Select: «дети» должны быть «Select.Option» или «Select.OptGroup» вместо «Option»

Я использую оболочку вокруг компонента Antd Select.

import { Select as ASelect } from 'antd';

function Select({ children, ...props }) {
  return <ASelect {...props}>{children}</ASelect>;
}

function Option({ children, ...props }) {
  return <ASelect.Option {...props}>{children}</ASelect.Option>;
}

Select.Option = Option;

Что вызывает ошибку ниже, где бы этот компонент ни использовался.

Warning: `children` should be `Select.Option` or `Select.OptGroup` instead of `Option`.

Применение:

<Select defaultValue="option1" style={{ width: 120 }}>
  {options.map((o) => {
    const { key, label } = o;

    return (
      <Select.Option key={key} value={key}>
        {label}
      </Select.Option>
    );
  })}
</Select>

Массив опций:

const options = [
  { key: 'option1', label: 'Option 1' },
  { key: 'option2', label: 'Option 2' },
  { key: 'option3', label: 'Option 3' },
];

Живая Демо

Создайте ползком, похожим на звездные войны, с помощью CSS и Javascript
Создайте ползком, похожим на звездные войны, с помощью CSS и Javascript
Если вы веб-разработчик (или хотите им стать), то вы наверняка гик и вам нравятся "Звездные войны". А как бы вы хотели, чтобы фоном для вашего...
учебник по Javascript
учебник по Javascript
JavaScript - это язык программирования, который обычно используется для добавления интерактивности и других динамических функций на веб-сайты. Он...
Как использовать d3.js для рисования 2D SVG-элементов в приложении Angular?
Как использовать d3.js для рисования 2D SVG-элементов в приложении Angular?
D3.js - это обширная библиотека, используемая для привязки произвольных данных к объектной модели документа (DOM). Мы разберем основные варианты...
Освоение принципов SOLID в JavaScript: Пошаговое руководство
Освоение принципов SOLID в JavaScript: Пошаговое руководство
Принцип единой ответственности (SRP): класс должен иметь только одну причину для изменения. Другими словами, у него должна быть только одна...
JavaScript - For Loop
JavaScript - For Loop
Наиболее используемая компактная форма оператора цикла.
Неделя 1 - Карточки с временной шкалой
Неделя 1 - Карточки с временной шкалой
Поскольку это была первая неделя, я решил начать с простого. Предполагалось, что у меня будет временная шкала с несколькими карточками, которые можно...
0
0
161
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

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

С последней версией Antd (5.0.0) вы можете просто передать options в качестве реквизита.

<Select options={options} defaultValue="option1" style={{ width: 120 }} />

Параметры теперь должны содержать value вместо key. (уникальный ключ для каждой опции будет обрабатываться компонентом Select внутри)

const options = [
  { value: 'option1', label: 'Option 1' },
  { value: 'option2', label: 'Option 2' },
  { value: 'option3', label: 'Option 3' },
];

children теперь необязателен.

Вам нужно обновить свою базовую реализацию Select, как показано ниже, иначе вы не получите никаких данных в выборе. (Поскольку вы можете не использовать children в каждом случае Select)

function Select(props) {
  return <ASelect {...props} />;
}

Примечание: options опора имеет больший приоритет, чем дети.

Рабочий код (без предупреждения консоли)

Другие вопросы по теме