별 등급을 렌더링하는 매우 간단한 방법

안녕하세요 👋🏼

이는 React에서 별 등급 구성 요소를 만드는 쉬운 방법입니다. 구성 요소는 제출 평가를 지원하지 않으며 별표만 사용하여 평가를 시각화하는 것입니다.


<Star /> 및 <StarRating /> 두 가지 구성 요소에 분할 솔루션을 수행했습니다.
<Star /> 구성 요소로 시작합니다. 구성 요소의 규칙을 설명하겠습니다.

구성 요소를 켜거나 끌 수 있습니다. 채워지거나 비어있는 별에 관한 것입니다.

값이 이진(켜기/끄기)이 아닌 경우 구성 요소가 부분적으로 채워진 별표를 렌더링해야 함

우리의 구성 요소 조건입니다.

구성 요소에는 소품이 하나만 있습니다.

type Props = {
  // value from 0 to 1
  filling?: number;
};

먼저 시작합시다. 쉽습니다.

export const Star = ({ filling }: Props) => {
  if (typeof filling === 'undefined' || filling === 1) {
    return (
      <FilledStar />
    );
  }

  if (filling === 0) {
    return (
      <EmptyStar />
    );
  }

  //...

이것은 바이너리 이야기입니다. 다음으로 이동합니다.

채워진 별을 사용하여 겹치는 빈 별이 필요합니다. 나는 별에 컨테이너를 사용하고 각 별을 절대적으로 배치합니다. 채워진 별은 overflow: hidden를 가지며 filling 소품을 사용하여 가시성을 제어하기 위해 별의 변경width을 할 수 있습니다.

  //...

  const width = filling * 100 + '%';

  return (
    <div className={styles.star}>
      <div className={styles.fill} style={{ width }}>
        <FilledStar />
      </div>
      <div className={styles.empty}>
        <EmptyStar />
      </div>
    </div>
  );
};

다음으로 StarRating 구성 요소가 필요합니다.

구성 요소에도 하나의 소품이 있습니다.

type Props = {
  value: number;
};

이제 별 다섯 개를 렌더링하는 간단한 구성 요소를 작성해 보겠습니다.

export const StarRating = ({ value }: Props) => (
  <div className={styles.rating}>
    {Array.from(Array(5)).map((_, index) => <Star />)}
  </div>
);

매우 쉽다고 생각합니다. 남은 것은 채워진 별, 비어 있음 및 부분적으로 채워진 것을 렌더링해야 할 때를 이해하는 것입니다.

별의 일련 번호가 내림value보다 작거나 같으면 항상 채워진 별을 렌더링해야 합니다.

if (starSerialNumber <= Math.floor(value) >=) {
  //...

그리고 별의 일련 번호가 반올림value보다 크면 빈 별을 렌더링해야 합니다.

if (starSerialNumber > Math.ceil(value) >=) {
  //...

별의 일련 번호가 반올림되면value 부분적으로 채워진 별을 렌더링해야 합니다.

채우기 소품은 다음과 같이 계산됩니다.

const filling = value - index;

채우기StarRating 구성 요소는 다음과 같습니다.

export const StarRating = ({ value }: Props) => (
  <div className={styles.rating}>
    {Array.from(Array(5)).map((_, index) => {
      const starSerialNumber = index + 1;

      if (starSerialNumber <= Math.floor(value)) {
        return (
          <div key={starSerialNumber} className={styles.star}>
            <Star />
          </div>
        );
      }

      if (starSerialNumber > Math.ceil(value)) {
        return (
          <div key={starSerialNumber} className={styles.star}>
            <Star filling={0} />
          </div>
        );
      }

      const filling = value - index;

      return (
        <div key={starSerialNumber} className={styles.star}>
          <Star filling={filling} />
        </div>
      );
    })}
  </div>
);

게시물을 읽어 주셔서 감사합니다. 좋은 하루 보내세요.