如何使用三元运算符内联应用我的 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>