如何使用三元運算符內聯應用我的 React 樣式？

Question

我目前正在嘗試為我的響應式網站添加側邊導航欄滑入和滑出功能。 我正在關注這里的第一個動畫示例。

我能夠首先使用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 navbarMobile得到應用。 但是，三元永遠不會運行。 如果我刪除styles.navbarMobile則三元工作。 有沒有辦法讓我可以同時運行這兩個？ 關於我應該如何處理這個問題的任何例子或想法？

Answer 1

問題是您設置的style道具錯誤。 由於您有一個逗號，它充當逗號運算符，因此基本上，無論三元計算結果如何，它都會被忽略，並且始終應用navbarMobile樣式。 正在計算三元運算符，它只是逗號運算符總是計算最右邊的操作數。 相反，使用像這樣的傳播語法：

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

這將采用navbarMobile的樣式並復制它們，然后根據navOpen確定left 。 在此處閱讀有關 JSX 中傳播語法的更多信息。

Answer 2

如果你使用 React Hooks，你現在可以更容易地做到這一點。

<li style={{ textDecoration: isDone ? "line-through" : "none" }}>
        {props.text}
 </li>