如何使用三元運算符內聯我的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中的擴展語法的更多信息。