将对象与对象解构和Turnary运算符相结合

问题描述

我试图根据一些布尔变量（sticky和isHidden）确定样式。

我知道我可以使用{...object1,...object2}

组合两个对象

我正在尝试将相同的逻辑应用于嵌套对象，因此，如果两个布尔值均为true，则样式将是组合对象styles.stickyNav，styles.hide和styles.navBar的结果，但如果都不是，则只是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}
}

---

示例输出

如果两个布尔值都为真，则样式应为

{
  top: -60
  height: 60,position: fixed
  display: 'flex',BoxShadow: "0 10px 6px -6px #777"
}

如果都不正确，则样式应为

{
  display: 'flex',BoxShadow: "0 10px 6px -6px #777"
}

如果只有粘性为真，则样式应为

{
  height: 60,BoxShadow: "0 10px 6px -6px #777"
}

解决方法

我会尝试：

const style =
  isHidden && sticky
    ? { ...styles.hide,...styles.stickyNav,...styles.navBar }
    : sticky
    ? { ...styles.stickyNav,...styles.navBar }
    : 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"
  }
}

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);

请注意，有一些控制台错误需要修复

,

这应该有效。

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

let sticky =  true;
let isHidden = true;

const styles = {
  hide: {  
    top: -60
  },boxShadow: "0 10px 6px -6px #777"
  }
}

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

console.log(style);