Reactjs Weg der Seitenleiste im Layout verstecken?

Ich frage mich, wie ich mit diesen 2 Layouts umgehen kann.Reactjs Weg der Seitenleiste im Layout verstecken?

Zuerst habe ich ein CSS-Raster-Layout, das auf Auflösungen von 1024px oder größer verwendet wird und wenn sie aktuellen Raster-Standard unterstützen.

Ziemlich Standard-Layout mit einer Kopfzeile, Seitenleiste und Hauptbereich.

.container { 
 
    display: grid; 
 
    grid-template-columns: 0.30fr 0.70fr; 
 
    grid-template-rows: auto; 
 
    grid-template-areas: "header header" "sidebar main"; 
 
} 
 

 
.header { 
 
    grid-area: header; 
 
    background-color: yellow; 
 
} 
 

 
.sidebar { 
 
    grid-area: sidebar; 
 
    background-color: lightblue; 
 
} 
 

 
.main { 
 
    grid-area: main; 
 
    background-color: green; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
 
    <title>Document</title> 
 
</head> 
 

 
<body> 
 
    <div class="container"> 
 
    <div class="header"> 
 
     header 
 
    </div> 
 
    <div class="sidebar"> 
 
     side 
 
    </div> 
 
    <div class="main"> 
 
     main 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

Nun, wenn der Browser auf dem mobilen Layout nicht Grid unterstützen oder sie sind unter 1024px dann gehen sie.

Dieses Layout wird per Flex erstellt und wird zum Layout von Kopfzeile und Hauptbereich. Die Seitenleiste wird ausgeblendet und nur durch Benutzerinteraktion angezeigt.

Ich kann mir einfach nicht vorstellen, wie ich das machen kann, mit dem ich zufrieden bin.

Mein Problem ist, dass ich das Seitenmenü mit Media Selectors ausblenden kann und dann beim Klicken auf das Hamburger-Menü das Display umschaltet, aber ich weiß nicht, ob es sich so anfühlt, als würde ich es einfach nicht rendern die Seitenleiste, anstatt sie zu verstecken.

Ich müsste auch etwas mit Fenstergröße ändern.

Quelle

2017-11-19 chobo2

es vollkommen gültig ist Medien-Selektoren zu verwenden. es geht nicht gegen das react-Paradigma, wenn es einfach eine mobile Layout-Änderung ist :) –

Nun, ich würde immer noch etwas auf die Sidebar reagieren müssen, da ich möchte, dass der Benutzer die Sidebar grundsätzlich wann immer sie möchten, umschalten kann mobiles Layout Also würde ich wahrscheinlich über den Staat eine Klasse hinzufügen müssen. Wie ich schon sagte, ich mag es einfach Dinge zu haben, die nicht vs. nur versteckt sind. – chobo2

Nun ja, die Entscheidung, es nicht zu machen, liegt an Ihnen. Aus meiner Erfahrung macht es einfacher, Übergänge anzuwenden, wenn Sie es ausblenden, anstatt es komplett zu rendern. Auch die Verwendung von JS für die Größenänderung von Ereignissen ist etwas unordentlicher und komplizierter als die Verwendung von Medienauswahlelementen (insbesondere, wenn Sie ein Reaktiv-Update für die Größenänderung auslösen). Meine Empfehlung wäre, beide Medienselektoren und eine Klasse zum Umschalten der Seitenleiste zu verwenden –

Wenn Sie dies tun wollen, nur in reactjs Weise wirklich Sie dies mit Lebenszyklus Methoden tun können, wie componentWillMount, componentDidMount und componentWillUnmount zusammen mit resize Ereignisse und Breite des Dokuments.

Ich habe nicht viel Arbeit der CSS-Teil in diesem Beispiel, aber Sie werden die Idee bekommen.

Versuchen Sie, die Größe des Fensters zu ändern, nachdem Sie dieses Skript in der Ganzseitenansicht ausgeführt haben.

class MyLayout extends React.Component { 
 
    constructor() { 
 
     super(); 
 
     this.state = { 
 
     mobileView: false, 
 
     showSidebar: true 
 
     }; 
 
     this.updateViewState = this.updateViewState.bind(this); 
 
     this.toggleSideBar = this.toggleSideBar.bind(this); 
 
    } 
 
    updateViewState() { 
 
     if (!this.state.mobileView && document.documentElement.clientWidth < 1024) { 
 
     this.setState({ 
 
      mobileView: true, 
 
      showSidebar: false 
 
     }); 
 
     } else if (document.documentElement.clientWidth > 1024) { 
 
     this.setState({ 
 
      mobileView: false, 
 
      showSidebar: true 
 
     }); 
 
     } 
 
    } 
 
    toggleSideBar() { 
 
     this.setState({ 
 
     showSidebar: !this.state.showSidebar 
 
     }); 
 
    } 
 
    componentWillMount() { 
 
     this.updateViewState(); 
 
    } 
 
    componentDidMount() { 
 
     window.addEventListener("resize", this.updateViewState); 
 
    } 
 
    componentWillUnmount() { 
 
     window.removeEventListener("resize", this.updateViewState); 
 
    } 
 
    render() { 
 
     let containerClass = 'container'; 
 
     if (this.state.mobileView) containerClass = containerClass + ' mobileview'; 
 
     return (
 
     <div className = { containerClass }> 
 
      <div className="header"> {this.state.mobileView && <button onClick={this.toggleSideBar} />} header 
 
      </div> 
 
     { 
 
      this.state.showSidebar && 
 
      <div className = "sidebar" > 
 
      side 
 
      </div> 
 
     } 
 
     <div className="main"> 
 
      main 
 
     </div> 
 
     </div>); 
 
    } 
 
} 
 

 
ReactDOM.render( 
 
    <MyLayout /> , 
 
    document.getElementById('container') 
 
);

.container { 
 
    display: grid; 
 
    grid-template-columns: 0.30fr 0.70fr; 
 
    grid-template-rows: auto; 
 
    grid-template-areas: "header header" "sidebar main"; 
 
} 
 

 
.mobileview { 
 
    grid-template-columns: 0fr 1fr; 
 
} 
 

 
.mobileview.sidebar { 
 
    float: left; 
 
} 
 

 
.header { 
 
    grid-area: header; 
 
    background-color: yellow; 
 
} 
 

 
.sidebar { 
 
    grid-area: sidebar; 
 
    background-color: lightblue; 
 
} 
 

 
.main { 
 
    grid-area: main; 
 
    background-color: green; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="container"> 
 
    <!-- This element's contents will be replaced with your component. --> 
 
</div>

Quelle

2017-11-19 20:17:57

Reactjs Weg der Seitenleiste im Layout verstecken?

Antwort

Verwandte Themen