Javascript 在“选择特定项目”上设置内嵌组件的样式

我希望能够为我选择的项目创建一些不同的UI

我正在为我选择的语句使用钩子，它工作得很好，我就是不能让样式工作

当前UI-基本引导卡希望的UI-选择时周围有边框的引导卡

我的钩子用于检测选择（工作正常）

以及我迄今为止努力实现的目标：

                <Card
                    onClick={() => setSelected(items.two)}
                    style={{
                        borderColor: selected ? 'black' : "none",
                    }}
                >
                </Card>
                <Card
                    onClick={() => setSelected(items.three)}
                    style={{
                        borderColor: selected ? 'black' : "none",
                    }}
                >
                </Card>
                ..................
                ..................

setSelected（第二项）}
风格={{
边框颜色：选中？'black'：“无”，
}}
>
（第三项）}
风格={{
边框颜色：选中？'black'：“无”，
}}
>
..................
..................

对于每一张卡来说，逻辑是相同的——但它不会检测到选择，并且卡始终有黑色边框。我试图在上面做的是，当特定项目被选中时，给它黑色边框，否则没有

---

有什么解决方案吗？我如何用它实现更好的UI/UX？我不知道为什么它不工作。

每张卡的逻辑都是一样的。因此，您可以使用

map

进行渲染。我看到您的

项

是对象，所以首先，将项转换为arrayKey:

const itemsKey=object.keys（项）

下一步：更新渲染

  {itemsKey.map((key, index) => (
    <Card
      key={index}
      data={items[key]}
      onClick={() => setSelected(key)}
      style={{
        borderColor: selected === key ? "black" : "none",
      }}
    />
  ))}

{itemsKey.map（（键，索引）=>(
选择（键）}
风格={{
borderColor:selected==键？“黑色”：“无”，
}}
/>
))}
index}从哪里来？我没有定义，所以对不起。我的计划失败了。我更新了我的评论。我发现遗漏了什么，谢谢你的更新。但它不打印任何其他内容，然后[Object]，似乎它不明白。我只是注释解决方案。您需要更新以匹配您的项目，那么您将如何映射各个标题<代码>{items.title}

？

  {itemsKey.map((key, index) => (
    <Card
      key={index}
      data={items[key]}
      onClick={() => setSelected(key)}
      style={{
        borderColor: selected === key ? "black" : "none",
      }}
    />
  ))}