在选定的特定项目上设置内联组件的样式

Question

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

我正在为我选择的语句使用钩子，它工作得很好，我只是无法使样式工作。

当前的用户界面 - 基本的引导卡。 Wished UI - 选中时有边框的引导卡。

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

const [selected, setSelected] = useState(items.one); // default value

到目前为止我尝试实现的目标：

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

对于每张卡片都是相同的逻辑 - 但它不会检测到选择并且卡片总是有黑色边框。我在上面尝试过的是，选择特定项目时，请给出黑色边框，否则没有。

任何解决方案我怎样才能获得更好的 UI/UX？我不知道为什么它不起作用。

Answer 1

每张卡片都是相同的逻辑。所以你可以使用map 来渲染。我看到你的items 是对象，所以首先将项目转换为arrayKey：const itemsKey = Object.keys(items);

下一步：更新渲染

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