조건부 논리 대신 CSS&# 유일한 자식

제가 작업하는 많은 프런트엔드 프레임워크에는 HTML 로직에 삼항 또는 if-브랜치를 삽입하는 옵션이 있습니다. 제가 많이 사용하는 논리입니다. 특별한 경우 중 하나는 데이터가 없을 때 표시하는 것입니다.

저는 제 삶을 훨씬 쉽게 만들어주는 CSS 패턴인 :only-child 의사 클래스를 우연히 발견했습니다.

반응하다

React에서는 이런 "뭔가"를 할텐데...

{
  data.length === 0
    ? <div>Nothing to show.</div>
    : <TableWithRecords />
}

모난

Angular에서는 이런 "뭔가"를 할텐데...

@if (data.length === 0) {
   <div>Nothing to show.</div>
} @else {
   <TableWithRecords />
}

CSS 사용

간단히 말하면 두 가지 경우가 있습니다.

1. 데이터가 없습니다.
2. 데이터가 있습니다.

<h2>No Data Showing</h2>
<ul>
  <li class="handle-no-data">Nothing to show.</li>
  <!-- <li>Data here</li> -->
</ul>

<h2>Data Showing</h2>
<ul>
  <li class="handle-no-data">Nothing to show.</li>
  <li>Data here</li>
</ul>

간단한 CSS 클래스 .single 사용 ...

.handle-no-data:not(:only-child) {
  display: none;
}
.handle-no-data:only-child {
  display: flex;
}

이 CSS는 다음과 같이 단순화될 수 있습니다.

.handle-no-data {
  &:not(:only-child) {
    display: none;
  }
  &:only-child {
    display: flex;
  }
}

위 코드의 결과는 다음과 같습니다...

요약

보시다시피 데이터 처리를 테이블 수준으로 옮겨야 하지만 CSS는 "데이터 없음" 시나리오를 처리하는 데 매우 간단합니다.

정말 신난다!

위 내용은 조건부 논리 대신 CSS&# 유일한 자식의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!