我应该使用twitter bootstrap或javascript来隐藏div吗？

我正在使用reactJS，我想在较小的屏幕上隐藏div（宽度为< 768px）。我这里有两个选择：我应该使用twitter bootstrap或javascript来隐藏div吗？

第一种方法：

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

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

第二种方法：

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

描述：我使用twiitter这里引导其将在其它格添加display: none。

P.s.我知道bootstrap也使用JavaScript，但我的问题是哪种方法更好用？ Infact我很困惑是否使用bootstrap或者不是，因为我已经使用css3 flexbox system与postcss和cssnext。

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

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

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

希望这会有所帮助。

2017-04-15 01:32:58 dattebayo

优先事项（和最小的性能问题可能不值得拖延决策）。

个人而言，我会用第二种方法去为简单的原因是：

但是，最终取决于你:)

2017-04-15 01:36:10 sqram

由于dattebayo指出，这是不好的做法，不必要的元素添加到DOM。在做出决定隐藏时，问问自己几个问题;

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

如果不是，则有条件的渲染是明确的选择。

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

如果是，是否会频繁切换状态？

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

否则坚持使用条件呈现。

我希望这有助于！

2017-04-15 05:11:43

回答