Ошибка консоли 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' },
];

Живая Демо

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
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 опора имеет больший приоритет, чем дети.

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

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