(SemanticUI + React) HTML-Elemente basierend auf der Bildschirmgröße ändern?

Question

Zum Beispiel sagen wir, ich möchte Bilder entfernen, wenn die Bildschirmgröße unter 600 Pixel Breite fällt. Was wäre die sauberste, schnellste und am besten zu wartende Methode, dies zu tun?

<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 Freie

jQuery ist ein DOM-Manipulation Bibliothek. Es liest und schreibt in das DOM. React verwendet ein virtuelles DOM (eine JavaScript-Repräsentation des echten DOM). React schreibt nur Patch-Updates in das DOM, liest aber nie von .

Es ist nicht möglich, echte DOM-Manipulationen mit dem virtuellen DOM von React synchron zu halten. Aus diesem Grund wurde die gesamte jQuery-Funktionalität in React re-implementiert.

<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

Wenn Ihr GUI Änderungen signifikant zwischen den beiden Versionen kann es sich lohnen, zwei Sätze von Komponenten zu halten, gegebenenfalls. Dann können Sie sie wie folgt machen:

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> 
    ); 
} 

Der Vorteil ist, dass Sie nicht DOM-Knoten erstellen, die nicht benötigt werden, so kann dies die Leistung besser zu CSS-only-Lösungen verglichen werden. Und es ist manchmal viel einfacher, die Dinge neu zu ordnen. Der Nachteil ist offensichtlich, dass mehr Code benötigt wird.

Answer 2

eine Abfrage Medien und Ihrer Klasse anhängen. z.B.

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; 
    } 
}