基于antd的Select二次封装会报警告

Question

问题描述

基于antd的Select二次封装，通过chidren接收组件内容时会报错，传入Option时警告但是能出效果，传入OptGroup时警告页面没有效果，警告内容为：children should be Select.Option or Select.OptGroup instead of ...

问题出现的环境背景及自己尝试过哪些方法

基于antd进行二次开发

相关代码

// 编写组件
import React from 'react';
import { Select } from 'antd';

const Index = React.forwardRef(({ children, ...rest }, ref) => {
  return <Select ref={ref} {...rest}>{children}</Select>
});

Index.Option = ({ children, ...rest }) => (
  <Select.Option {...rest}>{children}</Select.Option>
);

Index.OptGroup = ({ children, ...rest }) => (
  <Select.OptGroup {...rest}>{children}</Select.OptGroup>
);

export default Index;

// 组件的使用
import React from 'react';
import {  Select } from 'components-antd';

const { Option, OptGroup } = Select;

export default () => (
  <Select showSearch style={{ width: 200 }}>
     <OptGroup key="Manager" label="Manager">
      <Option value="jack">Jack</Option>
      <Option value="lucy">Lucy</Option>
    </OptGroup>
    <OptGroup key="Engineer" label="Engineer">
      <Option value="Yiminghe">yiminghe</Option>
    </OptGroup>
  </Select>
)

你期待的结果是什么？实际看到的错误信息又是什么？

页面可以正常显示，实际会出现部分问题以及出现警告，警告信息如下，其它组件测试可以成功透传children，就Select会出现问题