Question

例如，假设我想在显示尺寸低于600px宽度时删除图像。那种最干净，最快速，最易维护的方法是什么？

  <div class="card"> 
      <div class="image">
          <img src="http://placehold.it/256x256">
      </div> 

      <div class="content">
              <a class="header">Kristy</a>
          <div class="meta">
              <span class="date">Joined in 2013</span>
          </div>
          <div class="description">
              Kristy is an art director living in New York.
          </div>
      </div>
      <div class="extra content">
          <a>
              <i class="user icon"></i>
              22 Friends
          </a>
      </div>
  </div>

jQuery method

EDIT: Definitely not using jQuery (it works, but read below):

免费jQuery

jQuery是一个DOM操作库。它读取和写入   DOM。 React使用虚拟DOM（真实的JavaScript表示）   DOM）。 React只将补丁更新写入DOM，但从不读取   它

将真正的DOM操作与React保持同步是不可行的   虚拟DOM。因此，所有jQuery功能都已经实现   在React中重新实现。

<script>
  $(window).resize(function () {
     if (window.innerWidth < 600) { //Some arbitrary mobile width
        $(".image img").attr("src", "");
     } else {
        $(".image img").attr("src", "http://placehold.it/256x256");
     }
  });
</script>

SemanticUI method (Doc)

<div class="ui container desktop only grid">
  Contents
</div>

Using React only?

  render() {
    let content = this.state.width < 600 ? <MobileComponent/> : <DesktopComponent />;
    return(<div>
        <div>{content}</div>
        <childComponent myWidth= {this.state.width}></childComponent >
        <childComponent2 myWidth= {this.state.width}></childComponent2 >
   </div>
  )

Answer 1

使用媒体查询并附加到您的课程。 e.g。

HTML：

 <div class="image hideOnSmallScreen">
              <img src="http://placehold.it/256x256">
          </div>

CSS：

.image {
   display:block;
}

/* Small screens */
@media all and (max-width: 700px) {
   .image.hideOnSmallScreen {
      display:none;
   }
}

Answer 2

如果您的GUI在两个版本之间发生显着变化，那么在适当的情况下维护两组组件可能是值得的。然后，您可以像这样呈现它们：

render() {
    // don't create the component here with <>, just choose which one to use
    let TheComponent = this.state.width < 600 ? MobileComponent : DesktopComponent;

    return (
        <div>
            <TheComponent prop1=... />
            ...
        </div>
    );
}

优点是您不会创建不需要的DOM节点，因此与仅CSS解决方案相比，性能可能更好。并且，有时更容易重新调整周围的事情。显然缺点是需要更多代码。

（SemanticUI + React）根据屏幕尺寸最佳方法更改HTML元素？

2 个答案: