如何根据多种条件设置 React 组件的样式？

Question

我有一份产品清单及其有效期。我想根据我的商品是今天过期、今天没有过期还是已经过期来应用样式。（可能还有更多我想处理的条件）。
我已经成功地使用 嵌套三元运算符 或使用 带有三元运算符的样式数组 ，如下所示。

 <ListItem  
     containerStyle={
          [exp_check === -1 ? { backgroundColor: '#ff9ea5' } : null,
                exp_check === 0 ? { backgroundColor: '#fff185' } : null]
                    }
     badge={
          exp_check !== 1 ?
               exp_check === -1 ? { status: 'error', value: `!` } : { status: 'warning'} : null
           }
/>

有没有办法实现类似 switch 语句的样式或与此相关的任何其他道具。我希望能够轻松地有条件地设置我的道具，而不必编写嵌套逻辑或数组。类似于 :

stlye / badge / any prop accepted by the component = {
switch(something):
CASE1: ..
CASE2:.. 
etc etc 
CASE N:
}

我不确定我是否可以在 prop 中写一个 IF/ELSE 语句，因为如果我尝试这样做，我无法编译它。

Answer 1

考虑一种方法，其中您有一个分类功能，可以将给定的项目分类到特定的组中，然后将道具或样式或类名映射到组中。

const ONE_HOUR = 1000 * 60 * 60;
const ONE_DAY = ONE_HOUR * 24;

// an array of status names/labels, each with a predicate function
// to test whether a given item matches. first match wins.
const bins = [
  {
    status: 'expired',
    predicate: time => time < Date.now(),
  },
  {
    status: 'urgent',
    predicate: time => Date.now() - time < ONE_HOUR
  },
  {
    status: 'soon',
    predicate: time => Date.now() - time < ONE_DAY,
  },
  {
    status: 'normal'
    predicate: () => true
  }
}

// find the first bin whose predicate function returns true for the item and use that bin's 'status'
const expirationStatus = bins.find(bin => bin.predicate(item.expirationTime)).status;

// now expirationStatus is one of 'expired', 'urgent', 'soon', or 'normal'
// which you can then use to assign styles or classNames or whatever:

// these could live in the bins too, as a 'style' or 'className' property or whatever.
const styles = {
  expired: {
    background: 'grey',
  },
  urgent: {
    background: 'red'
  },
  soon: {
    background: 'yellow'
  },
  normal: {
    background: 'green'
  }
}

return (
  <Component
    style={styles[expirationStatus]} {/* this */}
    status={expirationStatus} {/* and/or this */}
    className={expirationStatus} {/* and/or this */}
  />
)

如何根据多种条件设置 React 组件的样式？

How do I style a react component based on multiple conditions?

conditional-operator

reactjs

conditional-rendering

react-native