Javascript 使用CSS样式的颜色代码值字典

我想使用HTML颜色代码字典，然后映射到该字典的样式

例如：

    const color = {
        red: "#E53D25",
        lightred : "#ED7462"
        ...
    }

这是我的映射函数；我使用

index

在上面的字典中迭代CSS值

            .map((stock, index) => (
                <Grid>
                    <ListItem>
                        <ListItemAvatar>
                            <Avatar style={{ backgroundColor: color[index]}}>
                                {index + 1}
                            </Avatar>
                        </ListItemAvatar>
                        <ListItemText
                            primary={stock.symbol}
                            secondary={financialData && financialData[5].filter((i) => i.symbol === stock.symbol).map(
                                filteredSymbol => (
                                    <>
                                        {filteredSymbol.company}
                                    </>
                                ))}
                        />
                    </ListItem>
                </Grid>

.map（（股票、指数）=>(
{index+1}
i、 symbol==股票.symbol）.map(
filteredSymbol=>(
{filteredSymbol.company}
))}
/>

我尝试像这样迭代字典，并按索引应用颜色：

style={{{backgroundColor:color[index]}

---

但这不起作用。我如何才能完成我试图构建的内容？

当您在对象（而不是数组）上映射时，您需要实现如下映射：

Object.keys(color).map(function(key, index) {
////other part of your code
  <Avatar style={{ backgroundColor: color[key]}}>
////other part of your code
});

Object.keys（颜色）.map（函数（键、索引）{
////代码的其他部分
////代码的其他部分
});

---

您需要首先映射对象的键，然后才能通过

color[key]

访问颜色对象不是数组，您可以通过

索引来访问值。您应该提供键匹配字符串

您需要传递一些解析为与颜色键匹配的字符串的stock属性：

// you could have a 'default' color key if stock.color is undefined
<Avatar style={{ backgroundColor: color[stock.color || 'default']}}>

index
是一个数字，因此
color[index]
将返回
undefined
，因为
color
对象是由颜色字符串名称键入的。那么
index
和颜色名称之间的预期关系是什么？如果您只想按插入顺序输入颜色，那么您可以执行
object.values（color）[索引]
请让我知道它是否适合您
const stockColor = (stock) => {
  // example purposes
  if (stock.value < 10) return color.red
  if (stock.value < 30) return color.lightred
  if (stock.value < 50) return color.yellow
  return color.green
}

...
<Avatar style={{ backgroundColor: stockColor(stock)}}>