优化样式条件以获得更好的图案

Question

你好，我想在 JSX 中更改我的 CSS 条件：

   style={{
          background:
            (input.categoryName[0] === "A" ? "#FF6F33" : null) ||
            (input.categoryName[0] === "B" ? "#2C828f" : null) ||
            (input.categoryName[0] === "C" ? "#C048EE" : null) ||
            (input.categoryName[0] === "E" ? "#01D584" : null) ||
            (input.categoryName[0] === "F" ? "#FF47BE" : null) ||
            (input.categoryName[0] === "G" ? "#F96693" : null) ||
            (input.categoryName[0] === "H" ? "#549EF0" : null) ||
            (input.categoryName[0] === "I" ? "#FEA544" : null),
        }}

像这样：

  (input.categoryName[0] === "A" ? "#FF6F33" :
                         === "B" ? "#2C828f" : 
                         === "C" ? "#C048EE" :
                         === "E" ? "#01D584" :
                         === "F" ? "#FF47BE" :
                         === "G" ? "#F96693" :
                         === "H" ? "#549EF0" :
                         === "I" ? "#FEA544" : null),

有什么建议吗？

Answer 1

要映射 key-value 对的对象可能会简化您的代码。

const background = {
  'default': '#ff0000',
  'a': '#FF6F33',
  'b': '#2C828f',
  // etc.
}

const category = input.categoryName[0].toLowerCase() ?? 'default'

style={{
  background: (background[category])
}}

优化样式条件以获得更好的图案

optimize style condition for better pattern

css

jsx