尝试根据JSON数据值绘制圆圈评级

Question

我是一个用React做项目的新手。我在这里要做的是，我试图画圆圈1~5来显示JSON数据中的值。

JSON数据值接收从-1到9如果某个键的值为-1，则该键不应以圆圈显示。

如果某个键的值至少为0或>= 0，则0将是5个非彩色圆圈。

如果某个键的值为9，则有4个全彩色圆圈和1个半彩色圆圈。

这个问题我已经纠结了4天了…

{
"result" : {
"product_id" : 1
"product_name" : "apple"
"rating" : {
"rating1" : -1,
"rating2" : 4,
"rating3" : 9,
"rating4" : 2,
"rating5" : -1
}
}
}

JSON数据看起来像上面的

这里是我得到的圆圈

const FullCircleRating = styled.div`
background: grey;
border-radius: 100%;
display: inline-block;
height: 15px;
width: 15px;
overflow: hidden;
position: relative;
&::after {
content: "";
position: absolute;
display: block;
height: 100%;
left: 0;
background: orange;
width: ${(props) => props.circles.full};
}
`;
const HalfCircleRating = styled.div`
background: grey;
border-radius: 100%;
//display:inline-block;
height: 15px;
width: 15px;
overflow: hidden;
position: relative;
&::after {
content: "";
position: absolute;
//display:block;
height: 100%;
left: 0;
background: orange;
width: 50%;
}
`;
const circlesValue = {
full: "100%",
half: "50%",
};
const Circles = styled.div`
display: flex !important;
`;
const CircleRating = styled.div`
background: grey;
border-radius: 100%;
//display:inline-block;
height: 15px;
width: 15px;
overflow: hidden;
position: relative;
&::after {
content: "";
position: absolute;
//display:block;
height: 100%;
left: 0;
background: orange;
}
`;

我使用了style -components

，我试着先画出圆圈，但我真的不知道如何根据我收到的JSON数据值显示正确的圆圈数量。

{[2,4,6,8,10].map(index => {
return (
<Circles><FullCircleRating index={index} /></Circles>
)
})}

这是我最初尝试显示5个圆圈的方法。

如果您需要更多关于代码的信息。

Answer 1

您可以通过计算用橙色完全着色，一半着色，其余为灰色的圆的数量来实现。

全彩色将是评级除以2并四舍五入Math.floor(rating / 2)

对于半色需要用mod运算符检查评级是否为奇数rating % 2 !== 0

对于灰色的，执行与橙色相同的计算，但差异为最大值(10)减去评级Math.floor((10 - rating) / 2)

然后做一些争用来生成元素数组。

const fullCircles = Array.from({ length: fullCirclesCount }, () => (
<FullCircleRating />
));
const emptyCircles = Array.from({ length: emptyCirclesCount }, () => (
<CircleRating />
));
if (rating % 2 !== 0) fullCircles.push(<HalfCircleRating />);
return <div>{[...fullCircles, ...emptyCircles]}</div>;

https://codesandbox.io/s/rating-circles-12o3p