🍊 金黄パーム05:@感情/スタイル伝達Props

13190 ワード
テキストリンク

進捗


edit-profile.tsx

  • my-page中프로필 수정ボタンをクリックすると表示されるプロファイルが変更
  • 入力ボックスの内訳は会員が入力したプロファイルと同じ

    • add-product.tsx

  • my-page中상품 등록ボタンをクリックして表示される商品登録ページ

    • post.tsx

  • 投稿の下部にある「ドライヤー」アイコンをクリックして投稿のページを表示・入力する

    • upload.tsx

  • 下部のナビゲーションバーで게시글 작성表示可能な投稿をクリックしてページを作成

    • list-chat.tsx

  • 下部ナビゲーションバーで채팅表示可能なチャットリストページをクリック
  • 未読メール付きのチャットルームであれば、顔左上に小丸印

    • UserAvatarコンポーネント

  • 繰り返し使用するユーザプロファイル画像を素子として作成
  • 各ページにプロファイル画像を個別に適用
    =>多くの場所でプロファイル画像が使用され、画像サイズが異なります.
  • 寸法ごとに構成部品を作成する
    =>画像サイズはそれぞれ42インチ42,50インチ50,110インチ110インチである.
  • 個々の素子で必要な値をpropsに渡す修正
    • // UserAvatar.tsx
import styled from '@emotion/styled';
import { COLORS } from '../constants';

type AvatarProps = {
  size: string;
  padding: string;
};

export const UserAvatar = ({ size, padding }: AvatarProps) => {
  return (
    <ImgProfile
      size={size}
      padding={padding}
      src="/default-profile-w.png"
      alt="사용자 프로필 이미지"
    />
  );
};

const ImgProfile = styled.img<AvatarProps>`
  width: ${(props) => props.size};
  height: ${(props) => props.size};
  padding: ${(props) => props.padding};
  border-radius: 50%;
  background-color: ${COLORS.light_gray};
`;
  • 次のように使用中ですが、この素子を適用するたびに、それぞれ指定しなければなりませんsizeおよびpadding値を指定しておくと、適用エラーが退屈に発見されなくなります…
    =>修正が必要です^^
    =>変更されました!
    • <UserAvatar size="30px" padding="6px" />
<UserAvatar size="40px" padding="5px" />
<UserAvatar size="90px" padding="10px" />

    コードを変更!

  • constantsカタログのindex.tsエUSER_AVATAR追加
    • export const USER_AVATAR = {
  xs: {
    size: '24px',
    padding: '6px',
  },
  sm: {
    size: '30px',
    padding: '6px',
  },
  md: {
    size: '40px',
    padding: '5px',
  },
  lg: {
    size: '90px',
    padding: '10px',
  },
};
  • 下記の通り
    =>これまでのコードでは、直接すべてUserAvata素子のsizeおよびpadding入力値
    =>コードを変更した後、constanstに寸法ごとに値を保存してインポートします.
    =>エラーを減らし、簡単に値を変更
    <UserAvatar size={USER_AVATAR.xs.size} padding={USER_AVATAR.xs.padding} />
<UserAvatar size={USER_AVATAR.sm.size} padding={USER_AVATAR.sm.padding} />
<UserAvatar size={USER_AVATAR.md.size} padding={USER_AVATAR.md.padding} />
<UserAvatar size={USER_AVATAR.lg.size} padding={USER_AVATAR.lg.padding} />

    コメントリンク


    @emotion/styled - Passing Props
    =>propsの伝え方はGoogle化されていますが、最終的には公式ドキュメントを見たほうがいいです!(喜び)

    の最後の部分

  • 私は公式文書を読むのが好きではありません.今は少しよくなった
  • ページを実現するとともに、コンポーネント化を継続している.
    最初はどの部分をコンポーネントに変えるべきか分かりませんでしたが、コードを書くと重複する部分が見えます.
    =>次に構成部品を作成し続けます...
    =>コードが整理されているのを見て、私はとても嬉しいです.
    • Javascriptデザインモード-17-装飾者モード
    syncthingインストール