react+hooks+styledComponent:nav barにイベントとダイナミックな変化を与える

TOC

Effectを使用してスクロールイベント

を検出する.

の状態の変化を検出するスタイル

を変更する.
動的変更

スタイル

1.Effectを使用してスクロールイベントを検出する

reactは基本的にjs文法を尊重します.そのため、できるだけjsを利用しましょう.
jsのaddEventListenerを使います.

userEffect windowを通ります.スクロールしたイベントを検出します.

addEventListener
userEffectは、コンポーネントのレンダリングを検出し、レンダリングが完了した後にイベントを開始します.2番目のパラメータを使用して条件を設定しない場合は、レンダリングのたびにコールバック関数が実行されます.
このuseEffectのためにeventListenerを掛けましょう.volumeの特定の値でイベントを実行するためには、volume値の位置が常に見られるのが適切であり、userEffectの位置が適切であると考えられます.
2.状態の変化を検出し、スタイルを変更する
addEventListener

useEffectに追加

の状態の変化に従って、コンポーネントの様式

が変更する.
上の2種類はつなぎ返さなければならない.この条件を満たすコードを書く前に、どうすればいいか考えてみましょう.

1号は希望するeventListenerを追加すれば良いだけで、コールバック関数として何を与えるべきかはまだ決まっていません.

スタイルは

の状態によって変化する必要があるため、タグのidまたはclass値に条件を設定することが望ましい.

首都コードの形で2番目の問題に対する思考結果を見る.

state.navStyle ? navOn : navOff

以上のコードは反作用によって実現できる.

        <div className={scrollToggle ? "NavOn" : "NavOff"}>

このように実現するのがstateです.scrollToggleの値をいつでも読み取り、trueとfalseの値に基づいて他のclassNameをdivタグに書き込むことができます.これにより、classNameが変更され、cssスタイルの値も変更されます.
3.スタイルを動的に変更する
styled-componsesを使用して動的に変更するには、さまざまな方法があります.
最も簡単な方法を見てみましょう.
この文章の核心内容はtagのclassまたはid値を変更し,異なるcssを適用することによってスタイルを変更することである.ではcssには自然に2つのcssがあります.切替値に基づいてnavOnというcss値とnavOffという値が指定されている場合.

  & .NavOn {
     ...
    transition: background 0.6s ease-in-out;
    ...
  }

このように変換効果を用いると,単純に変化するcss属性に時間差を与えるだけで効果が得られる.