我试图根据一些布尔变量(粘性和 isHidden)来确定样式。
我知道我可以通过使用组合 2 个对象{...object1, ...object2}
我正在尝试将相同的逻辑应用于嵌套对象,因此该样式将是组合对象的结果,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"
}
如果只有粘性是真的,那么风格应该是
{
height: 60,
position: fixed
display: 'flex',
width: '100%',
background: 'white',
boxShadow: "0 10px 6px -6px #777"
}