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中的样式并复制它们，然后根据left确定navOpen。阅读有关JSX here中的传播语法的更多信息。

Answer 2

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

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

如何将我的React样式内联到三元运算符？

2 个答案: