Question

我正在尝试编写antd的Select / Option的简写版本

代替使用

<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

由于original component的工作原理，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包装器的唯一目的是使代码更短，则是多余的。

如何设置/伪造组件的原型

1 个答案: