あなたの反応アプリのためのスタイルのコンポーネントの高度な使用-パート1

私の以前の記事では、スタイルのコンポーネントの一般的な機能については、どのように設定し、それらを使用して、なぜあなたの反応アプリケーションでそれらを使用するについて書いた.
このポストは、スタイルのコンポーネントのいくつかの高度な使用方法をカバーし、表示されますので、柔軟性をより広く理解し、おそらくいくつかのテクニックを学び、使用することができます.
既に知っているように、スタイルのコンポーネントは、ライブラリを使用すると、すでにスタイルを持つコンポーネントを作成することができます.これは、コンポーネントとスタイルの間のマッピングを削除します.これは、あなたのスタイルを定義しているとき、実際にはあなたのスタイルが付属している通常の反応コンポーネントを作成していることを意味します.
だから、練習をして、途中で新機能を学びましょう.我々は、携帯電話用の応答アプリケーションのために使用できるハンバーガーメニューを作成するつもりです.
私たちのメニューは、より小さなスタイルのコンポーネントから順番に作成される別のスタイルのコンポーネントです.メニューはmenubuttonとmenunavigationコンポーネントで構成されます.
“menu . js”というファイルを作成し、以下のコードを追加します.

export const Menu = () => {
  return (
    <>
      <MenuButton>
        <Line></Line>
        <Line></Line>
        <Line></Line>
      </MenuButton>
      <MenuNavigation>
        <NavList>
          <NavItem>
            <NavLink href="/">Home</NavLink>
         </NavItem>
         <NavItem>
            <NavLink href="/">About</NavLink>
         </NavItem>
       </NavList>
     </MenuNavigation>
    </>
  );
}

次はスタイリング.“menu . style . js”というファイルを作成し、次のコードを追加します.

import styled from "styled-components";

export const MenuButton = styled.div`
  cursor: pointer;
  width: 3rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
`;

export const Line = styled.div`
  width: 80%;
  height: 3px;
  background-color: white;
  margin: 0.2rem;
`;

export const MenuNavigation = styled.div`
  position: fixed;
  width: 200px;
  max-width: 70%;
  height: 100%;
  left: 0;
  margin-top: 1.4rem;
  z-index: 200;
  background-color: white;
  padding: 1rem 2rem;
  transition: all 0.7s ease;
  box-shadow: 0px 8px 30px rgba(0, 0, 0, 0.2);
`;

export const NavList = styled.ul`
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: center;
`;

export const NavItem = styled.li`
  margin: 5px 0;
  box-sizing: border-box;
  width: 100%;
  display: block;
`;

export const NavLink = styled.a`
  color: #8f5c2c;
  text-decoration: none;
  width: 100%;
  box-sizing: border-box;
  display: block;
  padding: 0.5rem;
`;

その後、すべての作成されたスタイルのコンポーネントをアウトメニューにインポートする必要があります.JSファイルを使用します.

import {
  MenuButton,
  Line,
  MenuNavigation,
  NavList,
  NavItem,
  NavLink
} from "./Menu.styles";

したがって、これらのいくつかの一般的なスタイルは、我々はすべてのコンポーネントにアプリケーションを追加しました.
今のところ、我々のナビゲーション・リンクは全く同じに見えます、しかし、我々がリンクについて欲しいならば、何が異なるでしょうか?

小道具に基づいてスタイルを変える
スタイルのNavlinkはコンポーネントですのでprops フードの下.私たちは、関数(「内挿」)をスタイルのコンポーネントのテンプレートリテラルに渡すことができます.
Navlinkコンポーネントに属性を渡すgreen ) そして、我々は現在Navlinkprops :
//メニュー.js

<NavLink green href="/">About</NavLink>

//メニュー.スタイル.js

export const NavLink = styled.a`
  color: #8f5c2c;
  text-decoration: none;
  width: 100%;
  box-sizing: border-box;
  display: block;
  padding: 0.5rem;

${props => props.green &&`
    background: green;
    color: white;
  `}`

今それは異なったスタイルです.これは驚くべき!!)しかし、これは我々がすることができるすべてでありませんprops .

柱に基づく特定の特性の変化様式
特定のコンポーネントの1つだけのプロパティのスタイルを変更する場合はどうなりますか?使用することもできますprops .
今のところ、両方のメニューボタンとナビゲーションのリンクは私たちのページに表示されますが、これは我々が正確にしたいものではありません.ボタンをクリックするだけでナビゲーションリンクを見たい.どうやってできるの?
我々は変更することができますdisplay 必要な動作を渡すことによるmenunavigationのプロパティdisplay 属性
//メニュー.js

<MenuNavigation display={"none"} />

//メニュー.スタイル.js

export const MenuNavigation = styled.div`
  position: fixed;
  width: 200px;
  max-width: 70%;
  height: 100%;
  left: 0;
  margin-top: 1.4rem;
  z-index: 200;
  background-color: white;
  padding: 1rem 2rem;
  transition: all 0.7s ease;
  box-shadow: 0px 8px 30px rgba(0, 0, 0, 0.2);
  display:${props => props.display}
`;

今、我々はもうナビゲーションリンクを見ません.しかし、これも我々が欲しかった行動でありません.私たちは変えたいdisplay 動的に:私たちはメニューボタンをクリックすると、我々はナビゲーションリンクを参照したいときに、我々は再びボタンをクリックすると、我々は彼らが再び崩壊してほしい.それを実行しましょう!
支柱によって特定の性質の様式を変えること
上記の動作を実装するには、真か偽のどちらかをdisplay 属性とそれに基づいてdisplay プロパティはblock or none .
そのためには、まずstate :
//メニュー.js

import { useState } from "react";
const [display, setDisplay] = useState(false);

我々はイニシャルdisplay 変数として、我々は現在のディスプレイを設定するために使用する場合、falseとして、我々は習慣ボタンを参照してください.メニューボタンをクリックするとdisplay 変数を' true 'にし、ナビゲーションリンクを見るべきです.
コードを見ましょう
//メニュー.js

import { useState } from "react";
import {MenuButton, Line, MenuNavigation, NavList, NavItem, NavLink} from "./Menu.styles";


export const Menu = () => {

const [display, setDisplay] = useState(false);

 // This method will change display to opposite every time we call it
const handleClick = () =>{
  setDisplay(!display);
}

  return (
    <>
      <MenuButton onClick={handleClick}>
        <Line></Line>
        <Line></Line>
        <Line></Line>
      </MenuButton>
      <MenuNavigation display={display}>
        <NavList>
          <NavItem>
            <NavLink href="/">Home</NavLink>
         </NavItem>
         <NavItem>
            <NavLink green href="/">About</NavLink>
         </NavItem>
       </NavList>
     </MenuNavigation>
    </>
  );
}

//メニュー.スタイル.js

export const MenuNavigation = styled.div`
  position: fixed;
  width: 200px;
  max-width: 70%;
  height: 100%;
  left: 0;
  margin-top: 1.4rem;
  z-index: 200;
  background-color: white;
  padding: 1rem 2rem;
  transition: all 0.7s ease;
  box-shadow: 0px 8px 30px rgba(0, 0, 0, 0.2);
  display:${props => props.display}
`;

だからここで受信display 属性スルーprops 我々の構成要素に、そして、我々は変化する必要がありますdisplay 我々が得るならば、何らかの形でtrue or false . どうやってできるの?

スタイル付きコンポーネントを持つ三元演算子
三項演算子を使用して、条件のスタイルを変更することができます.
この例では、次のようにロジックを書きますdisplay プロパティ
//メニュー.スタイル.js

export const MenuNavigation = styled.div`
  position: fixed;
  width: 200px;
  max-width: 70%;
  height: 100%;
  left: 0;
  margin-top: 1.4rem;
  z-index: 200;
  background-color: white;
  padding: 1rem 2rem;
  transition: all 0.7s ease;
  box-shadow: 0px 8px 30px rgba(0, 0, 0, 0.2);
  display:${props => props.display ? "block" : "none"}
`;

今、それはすべてのボタンとナビゲーションを設定したいです.しかし、我々はまだ我々が作りたい調整があります.たとえば、いくつかのメディアのクエリを設定するので、我々は小さな画面でハンバーガーメニューを見ることができます.またはいくつかのスタイルを追加したいと思いますhover and active リンクまたはボタンの右の擬似クラス?または、我々はclassName コンポーネントへの属性で、代わりにそれを使用しますか?我々はこれらのすべてを行うことができます.しかし、私の次のブログ投稿!
なので、私のようにスタイルを整えることができます.
P . S .プロジェクトへのリンクを見つけることができますHERE あなたがそれを必要とするならば.
私のブログを読んでくれてありがとう.接続を自由にするか、