Antd Select封装组件报错：children应为Select.Option而非Option

封装Ant Design的Select组件后，使用时控制台出现以下警告：

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

封装代码如下：

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;

组件用法示例：

<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的Select组件内部会校验子组件的类型，你自定义的Option是全新的React组件类型，并非Antd原生的ASelect.Option，因此无法通过校验触发警告。

直接移除自定义的Option组件，将Antd原生的ASelect.Option直接挂载到自定义Select上即可解决：

修改后的封装代码：

import { Select as ASelect } from 'antd';

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

// 直接挂载原生Option，无需自定义封装
Select.Option = ASelect.Option;
// 若需要使用OptGroup，同样直接挂载原生组件
Select.OptGroup = ASelect.OptGroup;

修改后，Select.Option就是Antd原生组件类型，Select内部的校验逻辑可以正确识别，警告会自动消失，同时完全兼容原有使用方式。

内容的提问来源于stack exchange，提问作者user20002028