Question

所以我调用了PokeAPI来创建一个Pokedex，我想让它在第一种类型的口袋妖怪是“草”的时候，比如背景是绿色的，当它是“火”的时候，背景是红色等

我最初将其声明为绿色，因为前 3 只神奇宝贝（Bulbasaur、Ivysaur 和 Venusaur）是草类型，当类型为火时，我能够创建一个条件将其更改为红色。我不知道如何在相同的样式中为相同的参数（背景）创建更多条件。

截至目前，这部分代码看起来像这样并且运行良好：（是来自 styled-components 的组件）

<Background style = {{background: typea === "fire" ? "#ff726f" : ""}}>

我只想添加更多条件，例如：

if typea === "fire" ? "red": ""
if typea === "bug" ? "yellow" : ""
if typea === "poison" ? "purple" : ""

等

我试图声明的所有方式都导致了错误。

Answer 1

我只想使用地图：

const backgrounds = {
    fire: 'red',
    bug: 'yellow',
    poison: 'purple',
}
const defaultBackground = 'white';

<Background style = {{background: backgrounds[typea] || defaultBackground }}>

如何根据变量更改背景颜色？

1 个答案: