基于值reactjs的Select Drop Down的自定义图标

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。它显示如下图，

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

所需输出：

Answer 1

您可以将颜色作为属性包含在 dbConfigList 中的对象中：就像您拥有主机和类型添加颜色一样。 然后在您的选择代码中，您可以这样：

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

Answer 2

你可以像这样定义颜色图：

   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>