Я использую оболочку вокруг компонента 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' },
];
Живая Демо
С последней версией 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
опора имеет больший приоритет, чем дети.
Рабочий код (без предупреждения консоли)