[TID]Modelの作成

明日から、上のコードから最初のプロジェクトが始まります.
ジョーがどうやって作ったのか本当に知りたい.人々の性格があまりにも違うので、問題が起こらないか心配です.
個人的には、欲しい人がいるのですが、本当に成功していればいいのですが、ダメなら黙って私の仕事をしていればいいので、あまり受け取る必要はないと思います.私はただ私の人がプレッシャーをかけないことを望んでいます...🙁
プロジェクトに入る前に、事前にいくつかのことをしたほうがいいので、Modelを実現したことを示します.
この4週間の実習プロジェクトはMonsterというstate、props、component、fetchについてのコメントをくれました.この課題にmodalを追加してみました.

上の画面は、モンスター課題がすべて完了した後に表示されるウィンドウです.
パターンを構成する場合、まず考慮すべき部分は、パターンラベルをどこに置くかです.
以上の課題の構成部分は以下の通りである.

Monster(메인) -> CardList(나열된 카드들) -> Card(카드 안에 내용들)

初めてコードを書くときは、CardListにカードが載っているので、受け取った情報を分けて公開すればいいのでしょうか?そう書いたと思いますが、本当にモードウィンドウを作成して飛ばし、Monsterからmapに移動してcardListを生成し、モンスターが並んでいる先端にモンスターのデータ出力しかありません.問題のパターンをCardに移行して再作成する.

インプリメンテーション

ステータスに関連する関数

constructor() {
    super();
    this.state = {
      modal: false,
    };
  }

toggleModal = () => {
  this.setState({
    modal: !this.state.modal,
  });
};

モードの状態はBoolean値で管理され、Trueの場合はモードウィンドウが表示されます.
toggleModelは、クリック時に現在のBoolean値を反転させる関数です.

Modal.scss

body.active-modal {
  overflow-y: hidden;
}

.btn-modal {
  padding: 10px 20px;
  display: block;
  margin: 100px auto 0;
  font-size: 18px;
}

.modal,
.overlay {
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position: fixed;
  z-index: 1;
}

.overlay {
  background: rgba(49, 49, 49, 0.8);
}

.modal-content {
  position: absolute;
  top: 40%;
  left: 50%;
  display: flex;
  justify-content: space-between;
  transform: translate(-50%, -50%);
  line-height: 1.4;
  background: #f1f1f1;
  padding: 14px 28px;
  border-radius: 3px;
  max-width: 700px;
  min-width: 300px;
  z-index: 200;

  > .monster-image {
    width: 50%;
    border: 1px solid black;
    border-radius: 50%;
  }

  > .monster-info {
    display: flex;
    flex-direction: column;
    justify-content: center;

    > .monster-name {
      font-weight: 700;
      text-decoration: underline;
    }
  }
}

.close-modal {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 5px 7px;
}

Modal.js

import React from 'react';
import './Modal.scss';

class Modal extends React.Component {
  render() {
    const { id, name, company, website, toggleModal } = this.props;

    return (
      <>
        <div className="modal">
          <div className="overlay" onClick={() => toggleModal()}></div>
          <div className="modal-content">
            <img
              src={`https://robohash.org/${id}?set=set2&size=180x180`}
              alt="Monster Profile"
              className="monster-image"
            />
            <div className="monster-info">
              <p className="monster-name">{name}</p>
              <p className="monster-email">
                <span>🏢</span> {company}
              </p>
              <p className="monster-website">
                <span>🌐</span> {website}
              </p>
            </div>
          </div>
        </div>
      </>
    );
  }
}

export default Modal;

overlayは、モードウィンドウが開いたときに、周囲の背景を暗くするために、1つの上に1つのレイヤを上書きします.OverlayにModelウィンドウが表示されます.
モードウィンドウが表示されたら、どのように閉じるかを30分以上考えてみると、考慮する必要はありません.オーバーライドレイアウトが外にあるので、切替モードclick eventを加えて終わります.

結果