如何使用三元运算符内联我的React样式？

Question

我目前正在尝试为我的响应网站添加侧导航栏幻灯片功能。我正在关注第一个动画示例here。

我能够让它首先与document.getElementById("mySidenav").style.width = "250px";一起工作。不过，我宁愿不使用document来操纵DOM。我想要使​​用本地状态并更新它。我正在使用JavaScript内联样式。这里是一些代码看起来像工作：

openNavbar =() => { 
    document.getElementById("mySidenav").style.width = "0"; 
}; 

<div style={styles.navbarMobile} onClick={this.openNavbar}> 
    <NavSidebar/> 
</div> 

navbarMobile: { 
    height: '100vh', 
    width: '100%', 
    position: 'fixed', 
    zIndex: 11, 
    top: '0', 
    left: '-100%', 
    overflowX: 'hidden', 
    overflowY: 'hidden', 
    transition: '1s', 
    paddingRight: '15px', 
    display: 'none', 

    '@media (max-width: 992px)': { 
    display: 'block', 
    backgroundColor: 'white' 
    } 
} 

现在很明显，我这样做比这个例子有点不同。我操纵左侧位置，而不是操纵宽度。它工作和运行顺利。但是，我现在试图实现一些本地状态并根据本地状态值更改CSS。这里是我有：

this.state = { 
    navOpen: false 
} 

openNavbar =() => { 
    this.setState({navOpen: true}); 
}; 

<div style={this.state.navOpen ? {left: 0} : {left: -100%}, styles.navbarMobile} onClick={this.openNavbar}> 
    <NavSidebar/> 
</div> 

navbarMobile: { 
    height: '100vh', 
    width: '100%', 
    position: 'fixed', 
    zIndex: 11, 
    top: '0', 
    left: '-100%', 
    overflowX: 'hidden', 
    overflowY: 'hidden', 
    transition: '1s', 
    paddingRight: '15px', 
    display: 'none', 

    '@media (max-width: 992px)': { 
    display: 'block', 
    backgroundColor: 'white' 
    } 
} 

主要重点是如何通过三元，同时也添加其他内联样式。通过做上面我所做的，navbarMobile中的所有css都得到应用。但是，三元从未运行。如果我删除了styles.navbarMobile，那么三元组就可以工作。有没有办法让我可以一起跑这两个？我应该如何处理这个问题的任何示例或想法？

Answer 1

问题是你设置你的style道具是错误的。既然你有一个逗号，它的作用就像是comma operator，所以基本上，不管三元组被评估为什么，它都被忽略，navbarMobile样式是总是被应用。三元运算符正在评估，它只是逗号运算符总是评估到最右边的操作数。相反，使用传播语法如下：

<div style={{ 
    ...style.navbarMobile, 
    left: this.state.navOpen ? 0 : '-100%' 
}}> 

这将在navbarMobile的风格和复制它们，然后根据navOpen确定left。阅读关于JSX here中的扩展语法的更多信息。