Erstellen eines anderen mobilen Layouts für eine Komponente in ReactJs

Question

Wie können wir mit ReactJs ein komplett anderes (mobiles Layout) für eine Komponente (mit einem anderen Desktop-Layout) erstellen? (Nicht reagierend, reaktionsschnell ist etwas, auf das css achten muss.) Es sollte ein anderes Layout für die Komponente sein, dh hier Erstellen einer Seite mit einem Menü (Kopfmenü) für Desktop-Bildschirme, das eine Navigationsleiste mit Logo auf einem kleinen Bildschirm wird .

Answer 1

Ehrlich gesagt, ein einfaches resposive CSS-Layout die beste Lösung sein kann, aber die Schritte sind zu

1) in JS erkennen, wenn der Benutzer in auf mobile oder Desktop. Zum Beispiel hat diese Frage einen guten Vorschlag als Antwort: Detecting a mobile browser

2) Verwenden Sie es in Ihrer Root-Komponente, um zu entscheiden, was das Layout verwenden:

function isMobile() { 
    // some js way to detect if user is on a mobile device 
} 

class Root extends Component { 
    render() { 
    return isMobile() ? (<MobileLayout />) : (<DesktopLayout />) 
    } 
} 

Answer 2

Kasse react-responsive, können Sie Medien-Abfrage verwenden zu machen unterschiedliche Komponente je nach Gerätegröße.