我应该使用 twitter bootstrap 还是 javascript 来隐藏 div？答案

【问题标题】：Should I use twitter bootstrap or javascript to hide a div?我应该使用 twitter bootstrap 还是 javascript 来隐藏 div？
【发布时间】：2017-09-11 06:44:53
【问题描述】：

我正在使用 reactJS，我想在较小的屏幕上隐藏一个 div（宽度

第一种方法：

{
 !!isSmallerScreen ? 
 <div className="icon">Icon</div>
 : <div className="name">Name</div>
}

说明：isSmallScreen 是一个布尔变量。这种方式甚至不会在源代码中显示other div。

第二种方法：

   <div className="icon hidden-md-up">Icon</div>
   <div className="name hidden-sm-down">Name</div>

描述：我在这里使用 twiitter 引导程序，它将在 other div 上添加 display: none。

附：我知道 bootstrap 也在使用 javascript，但我的问题是哪种方法更好用？事实上，我很困惑是否使用bootstrap，因为我已经在使用css3 flexbox system 和postcss 和cssnext。

您的建议将不胜感激。提前感谢您的时间。

【问题讨论】：

标签： javascript twitter-bootstrap reactjs postcss cssnext

【解决方案1】：

在第二种方法中，虽然会隐藏 div 但仍然保留在 DOM 中。

你应该使用 ReactJS 方法而不是渲染 div 是可能的。原因是如果你不需要创建它并让 DOM 变得沉重。

希望这会有所帮助。

【讨论】：

【解决方案2】：

偏好问题（以及最小的性能问题可能不值得拖延决策）。

我个人会选择第二种方法，原因很简单：

更容易添加过渡（淡入/淡出）
干净一点
您的虚拟域将保持不变 - 如果是第 3 方或您自己，后来决定在react外面操纵dom，你懂的这将是一致的。（即，选择第 n 个孩子等）。没有惊喜。

但是，最终取决于你:)

【讨论】：

【解决方案3】：

正如 dattebayo 所指出的，向 DOM 添加不必要的元素是不好的做法。在决定如何隐藏时，问自己几个问题；

这个元素会交替状态吗？不是 this.state 而是它是否隐藏。

如果不是，那么条件渲染是明确的选择。

render() {    
   return (
       this.props.isSmallScreen ?
           <SmallScreenElement /> :
           <BigScreenElement />;
   );
}

如果是，会不会频繁交替状态？

如果是，CSS 可能是该特定元素的选择。

否则坚持条件渲染。

我希望这会有所帮助！

【讨论】：