2

我试图根据一些布尔变量(粘性和 isHidden)来确定样式。

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

我正在尝试将相同的逻辑应用于嵌套对象,因此该样式将是组合对象的结果,styles.stickyNav如果两个布尔值都为真,但如果两者都不为真styles.hidestyles.navBarstyle.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"
}

如果只有粘性是真的,那么风格应该是

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

4

3 回答 3

1

我会尝试类似的东西:

const style =
  isHidden && sticky
    ? { ...styles.hide, ...styles.stickyNav, ...styles.navBar }
    : sticky
    ? { ...styles.stickyNav, ...styles.navBar }
    : style.navBar;
于 2020-08-31T06:51:09.680 回答
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);

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

于 2020-08-31T07:04:37.650 回答
0

这应该有效。

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

于 2020-08-31T07:09:18.127 回答