React-nodebird -05

イメージキャッシュユニット

今私が作成しているツイッターのようなNode Buddプロジェクトでは、基本的な文章のほかに、画像、ハッシュラベルなどを公開することができます.
イメージの仕事をしましょう
まずpost reduceの最初の投稿には3つの画像が追加されています.
現在は3つの画像しかアップロードされていないので大きな問題ではありませんが、たくさんの画像が入っていたら?投稿の長さが長すぎる(画像の数のため)、または投稿が望むフォーマットとは思えないように見えます.
したがって、投稿に3つ以上の画像がある場合は、画像ライブラリを使用してクリック表示機能を作成します.
画像焦点距離とは、画像をスライドさせて横に見ることができるものです.
では、この機能をどのように使用すればいいのでしょうか.
react-slickライブラリ.このライブラリを使用して数式ドキュメントを参照すると、画像キャッシュユニットを簡単に実現できます.
最初はこのライブラリだけ使えばいいと思っていたのに、盲目的にやってしまって、間違えてしまいました.react-slickエラーを防止するには、フォーマットを再調整する必要があります.

このようにして、イメージは奇妙な場所に現れた.

import styled, { createGlobalStyle } from "styled-components";
import { CloseOutlined } from "@ant-design/icons";

export const Global = createGlobalStyle`
  .slick-slide {
    display: inline-block;
  }
  .ant-card-cover {
    transform: none !important;
  }
`;

export const Overlay = styled.div`
    position: fixed;
    z-index: 5000;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
`;

export const Header = styled.header`
    height: 44px;
    background: white;
    position: relative;
    padding: 0;
    text-align: center;

    & h1 {
        margin: 0;
        font-size: 17px;
        color: #333;
        line-height: 44px;
    }
`;

export const SlickWrapper = styled.div`
    height: calc(100% - 44px);
    background: #090909;
`;

export const CloseBtn = styled(CloseOutlined)`
    position: absolute;
    right: 0;
    top: 0;
    padding: 15px;
    line-height: 14px;
    cursor: pointer;
`;

export const Indicator = styled.div`
    text-align: center;

    & > div {
        width: 75px;
        height: 30px;
        line-height: 30px;
        border-radius: 15px;
        background: #313131;
        display: inline-block;
        text-align: center;
        color: white;
        font-size: 15px;
    }
`;

export const ImgWrapper = styled.div`
    padding: 32px;
    text-align: center;

    & img {
        margin: 0 auto;
        max-height: 750px;
    }
`;

スタイル-componsesを使用してフォーマットと使用を調整します.

//component 가 많아지고 복잡해지면 이렇게 폴더 안에 만듬.
//why ?
import React, { useState } from "react";
import PropTypes from "prop-types";
import Slick from "react-slick";
import {
    Overlay,
    Header,
    CloseBtn,
    SlickWrapper,
    ImgWrapper,
    Indicator,
    Global,
} from "./styles";

const ImagesZoom = ({ images, onClose }) => {
    const [currentSlide, setCurrentSlide] = useState(0);
    return (
        <Overlay>
            <Global />
            <Header>
                <h1>상세 이미지</h1>
                <CloseBtn onClick={onClose} />
            </Header>
            <SlickWrapper>
                <div>
                    <Slick
                        initialSlide={0}
                        beforeChange={(slide, newSlide) =>
                            setCurrentSlide(newSlide)
                        }
                        infinite
                        arrows={false}
                        slidesToShow={1}
                        slidesToScroll={1}
                    >
                        {images.map((v) => (
                            <ImgWrapper key={v.src}>
                                <img src={v.src} alt={v.src} />
                            </ImgWrapper>
                        ))}
                    </Slick>
                    <Indicator>
                        <div>
                            {currentSlide + 1} /{images.length}
                        </div>
                    </Indicator>
                </div>
            </SlickWrapper>
        </Overlay>
    );
};

ImagesZoom.propTypes = {
    images: PropTypes.arrayOf(PropTypes.object).isRequired,
    onClose: PropTypes.func.isRequired,
};

export default ImagesZoom;

公式ドキュメントを確認し、Clickを使用します.
レッスンはこれで終わります.escキーを押してstateを変更してクリックを終了したい場合は、どうすればいいですか?
Slickを含む素子の一番外側の素子OverlayにonKeyDownを置けばよい.

const exit = useCallback((e)=>{
	if(e.keyCode === 27){
    	onClose();
    }
},[]);

これにより、ボタンを押すだけでなく、escキーを押すときにもslickを閉じることができます.