javascript - 通过对象解构和三元运算符组合对象

Question

我试图根据一些 bool 变量(sticky 和 ​​isHidden)来确定样式。

我知道我可以使用 {...object1, ...object2} 组合 2 个对象

我试图将相同的逻辑应用于嵌套对象，以便样式将是组合对象 styles.stickyNav 的结果。 , styles.hide和styles.navBar如果两个 bool 值都为 true，但只是 style.navBar如果两者都不成立

const styles = {
  hide: {  
    top: -60
  },
  stickyNav: {
      height: 60,
      position: fixed
  },
  navBar:{
    display: 'flex',
    width: '100%',
    background: 'white',
    boxShadow: "0 10px 6px -6px #777"
  }
}

const style={
  sticky ? {...styles.stickyNav} : {},
  isHidden && sticky ? {...styles.hide} : {},
  {...style.navBar}
}

---

示例输出

如果两个 bool 值都为 true，则样式应该为

{
  top: -60
  height: 60,
  position: fixed
  display: 'flex',
  width: '100%',
  background: 'white',
  boxShadow: "0 10px 6px -6px #777"
}

如果两者都不成立，那么风格应该是

{
  display: 'flex',
  width: '100%',
  background: 'white',
  boxShadow: "0 10px 6px -6px #777"
}

如果只有 Sticky 为 true，那么 style 应该为

{
  height: 60,
  position: fixed
  display: 'flex',
  width: '100%',
  background: 'white',
  boxShadow: "0 10px 6px -6px #777"
}

Answer 1

我会采用以下方法，仅在最初为空的对象中使用扩展运算符

const styles = {
  hide: {  
    top: -60
  },
  stickyNav: {
      height: 60,
      position: 'fixed'
  },
  navBar:{
    display: 'flex',
    width: '100%',
    background: 'white',
    boxShadow: "0 10px 6px -6px #777"
  }
}

var sticky = true;
var isHidden = true;

/***Original ***/
/*const style={
  ...(sticky ? styles.stickyNav : {}),
  ...(isHidden && sticky ? styles.hide : {}),
  ...styles.navBar
}*/

/*Improved Based on comment*/
const style={
  ...(sticky && styles.stickyNav),
  ...((isHidden && sticky) && styles.hide),
  ...styles.navBar
}



console.log(style);

请注意，有几个控制台错误需要修复