JS React 中的样式 CSS 与 Switch 语句？

Question

问题：

有没有办法根据三种情况使用 react 和 CSS 来设置单个组件的背景颜色？

示例：

值 = a - b;

开关（值）

case 1: value > 0 //设置背景为“绿色”。

case 2: value

case 3: value === 0 //设置背景为“黄色”。

我不是在寻找三元，因为它要么是 1 要么是 0，我正在寻找在其他 React Stack 溢出问题中找不到的东西。

示例代码：

const App = () => {
  const array = [{
      count: 2,
      stock: 2
    },
    {
      count: 30,
      stock: 20
    },
    {
      count: 20,
      stock: 30
    }
  ];

  const differences = array.map((items) => {
    return <p > {
      items.stock - items.count
    } < /p>;
  });
  return <div > {
    differences
  } < /div>;
};
export default App;

我想要第一个对象

是绿色的，

第二个对象是蓝色/黄色

第三个对象是红色的。

100% 动态。

任何信息都会有所帮助，谢谢！

Answer 1

谢谢，维马尔·帕特尔！

步骤：

1. 在地图函数中创建函数。

2. 将您的类分配给 if 语句的返回值。

3. 将您的 functionName() 传递给 className={functionName()} 对象。

示例：

import "./Style.css"

const App = () => {
    const array = [{
        count: 2,
        stock: 2
      },
      {
        count: 30,
        stock: 20
      },
      {
        count: 20,
        stock: 30
      }
    ];

    const differences = array.map((items) => {
        const classnameFunc = () => {
          const discrepency = items.stock - items.count;
          if (discrepency === 0) {
            return "blueClass"
          } else if (discrepency > 0) {
            return "greenClass";
          } else {
            return "yellowClass";
          }

          return <p className = {
            classnameFunc()
          } > {
            items.stock - items.count
          } < /p>;
        });
      return <div > {
        differences
      } < /div>;
    };
    export default App;

.greenClass {
  background-color: green;
}

.redClass {
  background-color: red;
}

.yellowClass {
  background-color: yellow;
}