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

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

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

반응하다

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

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

모난

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

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

CSS 사용

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

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

<h2 id="No-Data-Showing">No Data Showing</h2>

• Nothing to show.

Data Showing

• Nothing to show.
• Data here

간단한 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!