Reactjsのレイアウトでサイドバーを隠す方法は？

私はこれらの2つのレイアウトをどのように処理できるのだろうかと思っています。Reactjsのレイアウトでサイドバーを隠す方法は？

まずは、現在のグリッド標準をサポートしていれば、1024px以上の解像度で使用されるCSSグリッドレイアウトがあります。

ヘッダー、サイドバー、メインエリアを備えたかなり標準的なレイアウトです。ブラウザは、グリッドをサポートしていないか、彼らは1024px以下である場合

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

は今、彼らはモバイルレイアウトに行きます。

このレイアウトはフレックスで作成され、ヘッダーとメインエリアのレイアウトになり、サイドバーは非表示になり、ユーザーのやりとりによってのみ表示されます。

私は満足しているこれを行う反応の方法を理解できません。

私の問題は、メディアセレクタでサイドメニューを隠してから、ハンバーガーメニューをクリックすると表示が切り替わることですが、これはリアクションのように感じますか？サイドバーを隠す代わりに

また、サイズ変更時にウィンドウを処理する必要があります。

出典

2017-11-19 chobo2

それはメディアのセレクタを使用することを完全に有効です。それは単純にモバイルレイアウトの変更の場合、それは反応のパラダイムに反対していません:) –

私はサイドバー上でいくつかの反応を行う必要がありますように私は、ユーザーがサイドバーを切り替えることができますモバイルレイアウト。だから私はおそらく状態を介してクラスを追加する必要があります。私が言ったように、私はちょうど隠されていないものと隠されたものを持つことが好きです – chobo2

はい、レンダリングしないことを決定するのはあなた次第です。私の経験から、トランジションを完全にレンダリングするのではなく、非表示にすると、トランジションを適用しやすくなります。また、JSをリサイズイベントに使用すると、メディアセレクタを使用するよりもはるかに面倒で複雑になりがちです（特にリサイズ時に反応の更新をトリガする場合）。サイドバーの切り替えにメディアセレクタとクラスの両方を使用することをお勧めします –

あなたが本当に唯一あなたがresizeイベントとドキュメントの幅と一緒にcomponentWillMount、componentDidMountとcomponentWillUnmountのように、この使用してライフサイクルメソッドを行うことができますreactjs方法でこれをしたい場合。

私はこの例でCSS部分をあまり働かなかったが、あなたはそのアイデアを得るだろう。

このスクリプトをフルページビューで実行した後で、ウィンドウのサイズを変更してみてください。

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>

出典

2017-11-19 20:17:57

Reactjsのレイアウトでサイドバーを隠す方法は？

答えて

関連する問題