使用 CSS/JavaScript 进行嵌套条件样式答案

【问题标题】：Nested Conditional Styling with CSS/JavaScript使用 CSS/JavaScript 进行嵌套条件样式
【发布时间】：2022-08-16 23:30:06
【问题描述】：

在我的 React 应用程序中，我有一个样式化的框。组件保持状态。我想根据颜色改变盒子的颜色。

例如，如果 selectedID = 1，粉红色，如果 selectedID = 2，绿色等。

我尝试过这样的事情但没有成功：

<InformationContainer
// style={ {backgroundColor: selectedID < 2  || selectedID > 2 ? \'#ebedfb\':\'#ffe5e5\'}}
style={ {backgroundColor: 
selectedID < 4 ? \'#ffe5e5\':
selectedID < 3  || selectedID > 2 ? \'#414c97\':
selectedID < 3  || selectedID > 3 ? \'#65bb2c\':
selectedID < 3  || selectedID > 3 ? \'yellow\':
\'white\'
}}
>

我希望所有 4 个盒子和状态都有这个。

您遇到什么问题，根本没有背景颜色，或者只是坚持一些价值并且不会改变？你也能展示一下你是如何设置selectedID的吗？
所有这些逻辑都应该提取到一个函数或只是父组件上的一个数据对象。标记应保持清洁。

标签： css reactjs state

【解决方案1】：

对我来说，selectedID 似乎总是小于四，所以它永远不会通过第一次检查。以及你的一些检查没有意义。像这样的东西会更好。

style={ {backgroundColor: 
    selectedID == 4 ? '#ffe5e5':
    selectedID == 3 ? '#414c97':
    selectedID == 2 ? '#65bb2c':
    selectedID == 1 ? 'yellow':
    'white'

【讨论】：