是否可以在行内样式inline style中编写多个三元表达式设置样式？

问题原因 #

你在style属性中使用了逗号运算符，该运算符的特性是依次执行所有表达式后，仅返回最后一个表达式的执行结果，所以第一个day相关的判断逻辑完全被第二个info的判断结果覆盖，自然只有第二个逻辑生效。

解决方法 #

你可以通过对象展开语法，合并多个条件对应的样式规则，不满足条件时返回空对象而非null，避免合并时报错：

<div
  className='infoBox'
  style={{
    // 不满足day条件时追加红底白字样式
    ...(day ? {} : { backgroundColor: 'red', color: 'white' }),
    // 不满足info条件时追加隐藏样式
    ...(info ? {} : { opacity: '0', height: '0', width: '0', marginBottom: '0' })
  }}
>
</div>

如果存在样式冲突，写在后面的样式规则会覆盖前面的规则，你可以根据需求调整两个条件的前后顺序。

也可以用Object.assign实现相同的合并效果：

<div
  className='infoBox'
  style={Object.assign(
    {},
    day ? {} : { backgroundColor: 'red', color: 'white' },
    info ? {} : { opacity: '0', height: '0', width: '0', marginBottom: '0' }
  )}
>
</div>

内容的提问来源于stack exchange，提问作者nomac10