将对象与对象解构和三元运算符结合起来

Question

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

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

组合 2 个对象

我正在尝试将相同的逻辑应用于嵌套对象，这样样式将是组合对象 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',
  width: '100%',
  background: 'white',
  boxShadow: "0 10px 6px -6px #777"
}

如果两者都不是，则样式应为

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

如果只有 sticky 为真，则样式应为

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

Answer 1

我会尝试类似的方法：

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

Answer 2

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

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

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

Answer 3

这应该有效。

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

let sticky =  true;
let isHidden = true;

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

console.log(style);

将对象与对象解构和三元运算符结合起来

Combining objects with object destructuring and the turnary operator

javascript

json

ecmascript-6

reactjs

object-destructuring