html - 基于值reactjs的选择下拉菜单的自定义图标

Question

我是 React 的新手。我正在使用 ANT JS 库。在这里，我使用的是 Ant js Select。

这是我的select 代码，看起来像这样

<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 >

在 dbConfigList 中，我有如下所示的对象。

(4) [{…}, {…}, {…}, {…}]
0: {id: 1, name: "first config", data: "{"host":"localhost","type":"elastic"}"}
1: {id: 2, name: "second config", data: "{"host":"129.242.3.3","type":"mysql"}"}
2: {id: 3, name: "third config", data: "{"host":"192.168.12.1","type":"mongo"}"}
3: {id: 4, name: "fourth config", data: "{"host":"localhost","type":"mysql"}"}

我将在下拉select 选项中显示name，如上面的代码所示。根据 name，我想从对象中的 data 中获取 type。接下来，我想根据类型将 icon 显示到选择下拉列表中，并附加 name。

这是我尝试过的，

<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>

我在选项中传递了 icon。它显示如下图，

我不想要相同的颜色。我想根据类型制作图标颜色。 像 mysql 的 green，elastic 的 violet 和 mongo 的 grey 。我不知道如何让它成为可能。那么如何在选择中为值制作自定义图标。我搜索了堆栈溢出但找不到任何答案。帮我解决一些问题。

要求的输出:

Answer 1

您可以像这样定义颜色图:

   const colorMap = {
      mysql : "green",
      elastic : "violet",
      mongo:"grey"
}

并使用它:

<Select  mode="single" placeholder="Please select Configuration"  >
    {
        this.state.dbConfigList.map((dbConfig) => {
            var dbData = JSON.parse(dbConfig.data);
            return (
            <Option value={JSON.stringify(dbConfig)}>
                <Icon ... color={colorMap[dbData.type] || "red"} />{dbConfig.name}
            </Option>)
        })
    }
</Select>