Antd：当我的 Select.Option 是组件时，如何在 Select 的输入中指定文本

Question

使用Antd时，我发现无法在Select的输入中指定文本。
这是我的代码：

val item = {id: id1, name: name1, key1: value1, key2: value2, key3: value3}
<Select.Option value={item.id}>
    <Card>
        <p>key1: {item.key1}</p>
        <p>key2: {item.key2}</p>
        <p>key3: {item.key3}</p>
    </Card>
</Select.Option>

现在当我用 Select 选择它时，我会在输入字段中得到一个 Card 组件，这很难看。我想在输入字段中显示

item.name

，同时在下拉列表中显示卡片组件。
大家知道怎么处理吗？

Answer 1

在下拉列表中显示卡片组件时，无法在输入字段中显示 item.name。

输入字段和下拉列表中显示的内容必须相同。

以下是显示输入字段和下拉列表的 item.name 的方法：

import { Select } from 'antd';
const Option = Select.Option;

<Select>
   <Option key={item.id}>{item.name}</Option>
</Select>

Answer 2

你可以使用 optionLabelProp="label" 来做到这一点

<Select optionLabelProp="label">
 // your Select.Option
</Select>