Ant 设计在 options 属性中选择组件 OptGroup

Question

是否可以将 OptGroup 添加到来自 Ant Design ( https://ant.design/components/select/ ) 的Select 组件中的 options 道具？

import React from 'react';
import { Select } from 'antd';

const Places = () => {
  function handleChange(value, objectValues) {
    console.log(value);
    console.log(objectValues);
  }
return (
 <>
    <Select
      labelInValue
      defaultValue={{ value: 'Lucy' }}
      style={{ width: 120 }}
      onChange={handleChange}
      options={[ // add OptGroup here ??
        { label: 'Jack', value: 'Jack', id: '1' },
        { label: 'Lucy', value: 'Lucy', id: '2' },
      ]}
     />
  </>
  );
  };

export default Places;

我想将 OptGroup 添加到 options 道具中，而不是像传统方式那样做。

<Select defaultValue="lucy" style={{ width: 200 }} onChange={handleChange}>
 <OptGroup label="Manager">
  <Option value="jack">Jack</Option>
  <Option value="lucy">Lucy</Option>
 </OptGroup>
</Select>

Answer 1

事实上，是的，你可以！只需传入一个具有label和options属性的对象。像这样：

function handleChange(value) {
  console.log(`selected ${value}`);
}

ReactDOM.render(
  <Select
      labelInValue
      defaultValue={{ value: 'Lucy' }}
      style={{ width: 120 }}
      onChange={handleChange}
      options={[
          {
            label: "Test",
            options:
            [
              { label: 'Jack', value: 'Jack', id: '1' },
              { label: 'Lucy', value: 'Lucy', id: '2' }
            ]
          }
      ]}
     />,
  mountNode,
);

这是一支工作笔