NodeJS와 React 프로젝트를 설정했습니다. 프로젝트에서 각 사용자는 고유 한 목록을 가지며 각 목록에는 고유 한 리뷰가 있습니다. 이제 리뷰 번호를 얻은 다음 평균 리뷰를 계산합니다. 이제 내가받는 평균 숫자로 아이콘을 채우고 싶습니다. 예를 들어 평균 리뷰가 3 개인 경우 별 3 개가 채워지고 별 2 개는 채워지지 않습니다. 별표 아이콘을 구성 요소로 만들었고 내가해야 할 일은 isFilled={true}아이콘을 채우는 것뿐입니다 .
평균 등급 번호를 얻는 방법 :
// Get average number of all ratings
const arrAvg = arr => arr.reduce((a, b) => a + b, 0) / arr.length;
const getAvgRating =
reviews.length > 0 ? arrAvg(reviews.map(review => review.attributes.rating)) : 0;
const avgRating = parseInt(getAvgRating); // This is my average review number
이것은 내 리뷰 별표 아이콘입니다 (평균 평점 수에 따라 각 별표를 채우고 싶습니다).
<IconReviewStar isFilled={true} /> // isFilled will mark icon as filled
<IconReviewStar isFilled={true} />
<IconReviewStar isFilled={true} />
<IconReviewStar />
<IconReviewStar />
이것에 대한 쉬운 해결 방법이 있습니까? 그래서 불필요한 코드를 작성하지 않아도됩니다. 어떤 도움도 나를 올바른 답으로 안내하는 기사라도 의미합니다.
최고, Alexa
반복을 시도하고 prop을 조건부로 avgRating.
const totalFilled = Math.ceil(avgRating);
const totalStars = 5;
const ReviewBar = () =>
[...Array(totalStars).keys()].map((key) => (
<IconReviewStar key={key} isFilled={key < totalFilled} />
));
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다