Html 基于值的“选择”下拉列表的自定义图标

我不熟悉

react

。我正在使用

antjs

库。在这里，我使用的是

antjsselect

这是我的

选择
代码，看起来像这样

<div>
    <Form.Item label="Choose  Configuration" >
        {getFieldDecorator('select', {
            valuePropName: 'option',
            rules: [{ required: true }],
            onChange: (value) => { this.onConfigNameChange(value) },
             />

        })(
            <Select  mode="single" placeholder="Please select Configuration"  >
                {
                    this.state.dbConfigList.map((dbConfig) => (
                        <Option value={JSON.stringify(dbConfig)}>{dbConfig.name}</Option>
                    ))
                }
            </Select>
        )}
    </Form.Item>
</div >

我将在下拉菜单中显示
名称
选择
选项，如上面的代码所示。基于
名称
，我想从对象中的
数据
中获取
类型
。接下来，我想在选择下拉列表中根据类型显示
图标
，并附加
名称

这是我试过的

<Select  mode="single" placeholder="Please select Configuration"  >
    {
        this.state.dbConfigList.map((dbConfig) => (
            <Option value={JSON.stringify(dbConfig)}><Icon icon="database" iconSize={20} color="violet" />{dbConfig.name}</Option>
        ))
    }
</Select>


{
this.state.dbConfigList.map（（dbConfig）=>(
{dbConfig.name}
))
}

我在选项中传递了
图标
。如下图所示，

我不想要相同的颜色。我想根据类型制作图标颜色。
类似于
mysql的
绿色
，
elastic的
紫色
，
mongo的
灰色
。我不知道如何使它成为可能。那么，如何在select中为值创建自定义图标。我搜索了堆栈溢出，但找不到任何答案。帮我解决一些问题

所需输出：

您可以将颜色作为属性包含到dbConfigList中的对象中：就像您有主机并键入add color一样。
然后，在您的选择代码中，您可以这样做：

<Select  mode="single" placeholder="Please select Configuration"  >
{
    this.state.dbConfigList.map((dbConfig) => (
        <Option value={JSON.stringify(dbConfig)}><Icon icon="database" iconSize={20} color={dbConfig.color} />{dbConfig.name}</Option>
    ))
}


{
this.state.dbConfigList.map（（dbConfig）=>(
{dbConfig.name}
))
}

您可以定义颜色贴图，如：

const colorMap={
mysql：“绿色”，
弹性：“紫罗兰色”，
蒙戈：“灰色”
}

并使用：


{
this.state.dbConfigList.map（（dbConfig）=>{
var dbData=JSON.parse（dbConfig.data）；
返回(
{dbConfig.name}
)
})
}
感谢您的回复。我已经在数据中添加了颜色。
数据
为字符串形式。如何用JSON解析数据并从中获取颜色。你能发布新的dbConfig列表吗？
（4）[{…}，{…}，{…}，{…}，{…}，{…}]0:{id:1，名称：“第一配置”，数据：{“主机”：“本地主机”，“类型”：“弹性”，“颜色”：“蓝色”}1:{id:2，名称：“第二配置”，数据：{“主机”：“129.242.3.3”，“类型”：“mysql”，“颜色”：“绿色”}2:{id:3，名称：“第三配置”，数据：{host:“192.168.12.1”，“type:“mongo”，“color:“grey”}}3:{id:4，名称：“第四配置”，数据：{host:“localhost”，“type:“mysql”，“color:“green”}
这里的数据是stringdbConfig[0]的形式.data.color应返回蓝色。请尝试在控制台上显示此值，以确保您能够首先获取颜色属性。此外，我认为它已经是一个字符串，因此无需进行转换。诀窍是确保您实际获取的是颜色值。谢谢..但是
数据
是字符串形式。如何使用JSON解析数据和颜色t它的类型。
JSON.parse（dbConfig）
有问题吗？@Auticcat，我无法从数据中获取类型。
dbConfig.data.type
。它是空的。@Kiddy您可以使用
var dbData=JSON.parse（dbConfig.data）
和access type with
dbData.type
@tunapq，但将JSON.parse放在何处。如果我创建了一个新的dbData，那么如何将其映射到select。我将select映射到dbconfig list。如何在其中使用dbData
<Select  mode="single" placeholder="Please select Configuration"  >
{
    this.state.dbConfigList.map((dbConfig) => (
        <Option value={JSON.stringify(dbConfig)}><Icon icon="database" iconSize={20} color={dbConfig.color} />{dbConfig.name}</Option>
    ))
}