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

【问题标题】：How do I apply my React styles inline with a ternary operator?如何使用三元运算符内联应用我的 React 样式？
【发布时间】：2018-02-06 09:04:42
【问题描述】：

我目前正在尝试为我的响应式网站添加侧导航栏滑入和滑出功能。我正在关注第一个动画示例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，那么三元组就可以了。有没有办法可以同时运行这两个？关于我应该如何处理这个问题的任何例子或想法？

【问题讨论】：

标签： javascript css reactjs ecmascript-6

【解决方案1】：

问题是您设置 style 属性错误。因为你有一个逗号，它充当comma operator，所以基本上，无论三元被评估为什么，它都会被忽略并且navbarMobile 样式总是应用。三元运算符正在计算中，它只是逗号运算符总是计算最右边的操作数。相反，请使用如下扩展语法：

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

这将获取navbarMobile 中的样式并复制它们，然后根据navOpen 确定left。阅读更多关于 JSX here 中传播语法的信息。

【讨论】：

这很有意义。真的很好解释。我对 javascript 和 es6 还很陌生，所以很高兴重新解释一些事情，因为我经常忘记哈哈。谢谢安德鲁。
我有一个简单的问题。你知道三元是否在状态改变的时候运行？还是一次性评估？
@Nappstir 它在每次状态变化时运行，因为元素在每次状态变化时重新渲染（这意味着每次状态变化时都会调用render 方法）。

【解决方案2】：

如果您使用 React Hooks，现在可以轻松很多。

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

【讨论】：

你的答案与 React hooks 有什么关系？