0

我正在使用 reactJS，我想在较小的屏幕上隐藏一个 div（宽度<768px）。我在这里有两个选择：

第一种方法：

{
 !!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到其他 div。

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

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

4

3 回答 3

0

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

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

希望这可以帮助。

于 2017-04-15T01:32:58.490 回答
0

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

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

  1. 更容易添加过渡（淡入/淡出）
  2. 干净一点
  3. 您的 vdom 将保持不变 - 如果第 3 方或您自己后来决定操纵外部的 dom 做出反应，您知道这将是一致的。（即，选择第 n 个孩子等）。没有惊喜。

但是，最终取决于你:)

于 2017-04-15T01:36:10.223 回答
0

正如 dattebayo 指出的那样，向 DOM 添加不必要的元素是一种不好的做法。在决定如何隐藏某些东西时，问自己几个问题；

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

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

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

如果是，它会经常交替状态吗？

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

否则坚持条件渲染。

我希望这有帮助！

于 2017-04-15T05:11:43.790 回答