Как я могу установить / подделать proptype компонента

Question

Я пытаюсь написать сокращенную версию выбора / опции antd

Вместо использования

<Option value='foo'>bar</Option>

Я хочу использовать

<Option value='foo' label='bar' />

Я написал следующеекод оболочки:

import { Select } from 'antd'

const Option = (options) => {
  const label = options.label
  delete options.label

  return <Select.Option {...options}>{label}</Select.Option>
}

Когда я использую его в следующем примере

<Select>
  <Option value='foo' label='bar'
</Select>

Я получаю

Предупреждение: дочерние элементы Select должны быть Select.Option или Select.OptGroup вместо Option.

Как я могу вернуть свой компонент так, что antd считает его оригинальным Select.Option?

Answer 1

Из-за того, как оригинальный компонент работает, компонент Option является фиктивным компонентом, который никогда не обрабатывается и не используется в качестве заполнителя для данных Select, его перенос в другой компонент не приносит никакой пользы.

Возможное решение должно быть расширено Select вместо:

import {Select as OriginalSelect} from 'antd';

const Option = props => null;

const Select = ({ children, ...props }) => {
  children = React.Children(children).map(child => {
    if (child.type === Option) {
      const {label, ...props} = child.props;
      return <OriginalSelect.Option {...props}>{label}</OriginalSelect.Option>;
    } else {
      return child;
    }
  });

  return <OriginalSelect {...props}>{children}</OriginalSelect>;
};

Кроме того, <Option value='foo' label='bar' /> не может считаться ярлыком для <Option value='foo'>bar</Option>, потому что он такой же длины, поэтому, если толькоЦель оболочки Option - сделать код короче, он избыточен.