ReactJS中如何为style属性添加多个条件判断？

你可以通过对象合并的方式，把两个独立的条件样式组合到同一个style对象里，React会自动合并这些样式属性。下面是几种可行的实现方式：

方法1：使用ES6对象扩展运算符（推荐） #

直接用...展开两个条件生成的对象，代码简洁直观：

<div
  className={className.wrapper}
  style={{
    // 原有位移条件
    ...(wrapper ? { transform: "translateX(0)" } : { transform: "translateX(50em)" }),
    // 新增的边框条件
    borderRight: EndOfTreatment ? "10px solid green" : "10px solid red"
  }}
></div>

如果想让边框条件和位移的写法保持一致，也可以写成对象展开形式：

<div
  className={className.wrapper}
  style={{
    ...(wrapper ? { transform: "translateX(0)" } : { transform: "translateX(50em)" }),
    ...(EndOfTreatment ? { borderRight: "10px solid green" } : { borderRight: "10px solid red" })
  }}
></div>

方法2：提前声明样式变量 #

如果条件逻辑后续可能扩展，提前把样式对象单独声明会让代码更易维护：

const wrapperStyle = wrapper ? { transform: "translateX(0)" } : { transform: "translateX(50em)" };
const borderStyle = EndOfTreatment ? { borderRight: "10px solid green" } : { borderRight: "10px solid red" };

<div
  className={className.wrapper}
  style={{ ...wrapperStyle, ...borderStyle }}
></div>

方法3：使用Object.assign（ES5兼容写法） #

如果项目环境不支持ES6对象扩展，用Object.assign也能实现合并：

<div
  className={className.wrapper}
  style={Object.assign(
    {},
    wrapper ? { transform: "translateX(0)" } : { transform: "translateX(50em)" },
    EndOfTreatment ? { borderRight: "10px solid green" } : { borderRight: "10px solid red" }
  )}
></div>

注意事项 #

你的两个条件分别控制transform和borderRight，属于完全独立的样式属性，不会出现属性覆盖的问题，以上方法都可以放心使用。

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