오늘의 주제.

저는 Z-idex가 싫어요.

왜?

-> 프레젠테이션

step 0

스크롤할 때 Modal 단추가 헤더에 덮여

페이지 끝의 z-indsx1, 서랍의 z-idex2, 모형은 z-idex10입니다.
눈썹이 한동안 굴러간 후에fixed로 변하여main에 표시됩니다.
눈썹에 모드를 표시하고 싶어서 z-idex10이 됐어요.
컨테이너에 z-idex가 있기 때문에 버튼도 위에 표시됩니다.

step 1

버튼에 제목을 표시하려면z-idex20

으로 설정하십시오
Next0 버튼을 한 번 누른 다음 이동합니다.
Modal 버튼이 머리글 아래에 나타납니다.
Modal 버튼을 누르면 머리 아래에 모드가 나타납니다.
표지는 20이고, 모형은 10이다. 이것은 당연한 것이다.

step 2

.머리 위에 modal을 표시하려면 z-idex30

으로 설정하십시오
Next1 버튼을 한 번 누른 다음 이동합니다.
그래서 헤더가 20이고 모드가 30임에도 불구하고
모드가 머리글 아래에 표시됩니다.
자동차의 컨테이너(.modal Component)가 10이기 때문이다.

step 3

.modalComponent의 z-idex를 initial

로 설정합니다.
Next2 버튼을 한 번 누른 다음 이동합니다.
그리고 헤더는 20, 모드는 30의 순서로 모드를 순조롭게 표시합니다!
언뜻 보기에는 순조로운 것 같다.
그러나 서랍을 열어 보니 서랍이 또 머리글 밑에 보였다.
머리글이 20이고 서랍이 2인 것은 당연하다.

step 4

서랍을 40으로 맞추세요!

Next3 버튼을 한 번 누른 다음 이동합니다.
그래서 서랍이 z-idex40으로 변하여 안전하게 페이지 맨 위에 나타났습니다!

이렇게 해결?

이번에 특별히 인기 있는 Z-idex 샘플을 만들었어요.
작업 중에도 이런 z-idex 문제가 발생할 수 있다.
그리고 다른 사람이 쓴 코드의 영향을 계속 받는다
z-idex를 만지작거리면 다른 사람이 쓴 코드에도 영향을 끼치기 쉽다.
그리고 고장을 발견하기 어려우며, z-idex도 조사하기 어렵다.
꼼꼼하게 만들면 피할 수 있지만 건전한 회피법이라고 보기는 어렵다.
z-idex를 최후의 수단으로 해주세요.
가능하면 직감적으로 DOMtree 순서대로 표시됩니다
실수도 적어 처리하기 쉽다.

기쁘고 축하할 만하다

말도 안 돼!

오늘

[React] z-idex로 인한 고민

자기 소개

와타나베 구이밍

nabepon_dev follow me!

아시아탐색주식회사

프런트엔드 엔지니어

최근 프로젝트

모 식당 서비스의 자매 서비스
눈치채다
react, redux, css modules, react-router etc...

구시대

모드,fixed 눈썹,서랍 메뉴 등
앞에 표시된 요소의 설치.
jQuery 시대에 DOM tree의 마지막에
z-idex에 의존하지 않아도 실현할 수 있다.
앞에 보여주고 싶은 거 바디에 적용.

var $modal = $('<div class="modal">modal</div>')
$(body).append($modal);

왜냐하면 순서도 고릴라가 DOM을 가지고 놀면 되니까.
js로 드디어 해냈어.

현대

리액트라면 이렇게 할 수 없어요.
네, 하지만 React에서 DOM을 찾아서 적용한 코드를 쓰고 싶지 않습니다.
그렇다면 리액트에 어떻게 설치해야 하는지는 두 가지 모델을 고려할 수 있다.
하나는 z-idex에서 노력하는 방법이다.
다른 하나는 DOM 뒤에 미리 구성하는 방법입니다.
DOM 뒤에 미리 배치

<div id="root">
  <HeaderComponent />

  <main>
    <div>
      ...
      <FooComponent>
        <button onClick={openFoo}>open</button>
      </FooComponent>
      ...
      <BarComponent>
        <button onClick={openBar}>open</button>
      </BarComponent>
      ...
      ...
    </div>
  </main>

  <FooterComponent />

  <ForwardLayer>
    {isFooOpen ?
      <div class="fooModal"> foo </div>
    : null }

    {isBarOpen ?
      <div class="barModal"> bar </div>
    : null }
  </ForwardLayer>
</div>

React 사전 구성 요소
조건 브랜치에 어셈블리를 표시하거나 숨깁니다.
귀찮다

리액트도 다른 데 뜨고 싶어요!

솔루션

라이브러리 작성

react-transfer

※ 구글의 README만 번역했습니다.번역 대기 PR...

사용법

유저 봐.
Destination에 TransportItem 내의 요소를 표시합니다.
Example
Demo
부터<div>- component code start</div><div>- component code end</div>의
중간에 코드가 쓰여 있는데, 실제로 보이는 것은<div>- display component</div> 아래에 있습니다.
또한 표시 전의 정렬 처리 등을 할 수 있다
js를 통해 표시 순서를 제어할 수 있습니다.
테스트 코드있기 때문에 저쪽을 보면 이해하기 쉬워요.

[React] z-idex로 인한 고민

해결!（？）

아시아 탐색 무한 모집 멤버!
일도 모집하고 있어요!
개발 및 업무 위임 수탁
둘 다 상의하세요.
nabepon_dev