所以我有一个评级系统,我已经编写了以下代码来显示要显示的星星数量,尽管它很长,所以我正在尝试找到一种方法来缩短它。
我不知道是否有某种算法先相乘然后加上空星之类的?
const rating = (recipe) => {
const value = (recipe.rating / recipe.votes.length).toFixed(1);
if (value >= 4.9)
return (
<>
<FaStar />
<FaStar />
<FaStar />
<FaStar />
<FaStar />
</>
);
if (value >= 4.5)
return (
<>
<FaStar />
<FaStar />
<FaStar />
<FaStar />
<FaStarHalfAlt />
</>
);
if (value >= 4)
return (
<>
<FaStar />
<FaStar />
<FaStar />
<FaStar />
<FaRegStar />
</>
);
if (value >= 3.5)
return (
<>
<FaStar />
<FaStar />
<FaStar />
<FaStarHalfAlt />
<FaRegStar />
</>
);
if (value >= 3)
return (
<>
<FaStar />
<FaStar />
<FaStar />
<FaRegStar />
<FaRegStar />
</>
);
if (value >= 2.5)
return (
<>
<FaStar />
<FaStar />
<FaStarHalfAlt />
<FaRegStar />
<FaRegStar />
</>
);
if (value >= 2)
return (
<>
<FaStar />
<FaStar />
<FaRegStar />
<FaRegStar />
<FaRegStar />
</>
);
if (value >= 1.5)
return (
<>
<FaStar />
<FaStarHalfAlt />
<FaRegStar />
<FaRegStar />
<FaRegStar />
</>
);
if (value >= 1)
return (
<>
<FaStar />
<FaRegStar />
<FaRegStar />
<FaRegStar />
<FaRegStar />
</>
);
if (value >= 0.5)
return (
<>
<FaStarHalfAlt />
<FaRegStar />
<FaRegStar />
<FaRegStar />
<FaRegStar />
</>
);
return (
<>
<FaRegStar />
<FaRegStar />
<FaRegStar />
<FaRegStar />
<FaRegStar />
</>
);
};
最佳答案
如果你真的想缩短它:
const rating = (recipe) => {
const value = (recipe.rating / recipe.votes.length).toFixed(1);
const stars = Array.from(Array(5)).map(() => <FaRegStar/>);
if (value >= 4.9) {
return stars.map(() => <FaStar/>);
}
for (let i = 0; i < Math.round(value); i++) {
stars[i] = i > value - 1 ? <FaStarHalfAt/> : <FaStar/>;
}
return stars;
};
这样会更容易理解(评分 >= 4.9 时会显示 5 星):
const rating = (recipe) => {
let value = (recipe.rating / recipe.votes.length).toFixed(1);
if (value >= 4.9) {
return Array.from(Array(5)).map(() => <FaStar/>);
}
const stars = [];
while (value >= 1) {
stars.push(<FaStar/>);
value--;
}
if (value >= 0.5) {
stars.push(<FaStarHalfAt/>);
}
while (stars.length < 5) {
stars.push(<FaRegStar/>);
}
return stars;
};
或者更短一点但仍然可以理解:
const rating = (recipe) => {
let value = (recipe.rating / recipe.votes.length).toFixed(1);
if (value >= 4.9) {
return Array.from(Array(5)).map(() => <FaStar/>);
}
const stars = [];
while (stars.length < 5) {
stars.push(value >= 1
? <FaStar/>
: value >= 0.5
? <FaStarHalfAt/>
: <FaRegStar/>);
value--;
}
return stars;
};
https://stackoverflow.com/questions/67547898/
相关文章:
r - 为什么 geom_smooth 不绘图? (唯一值不足错误)
python - 检查是否存在与列表中的字符串匹配的子字符串
visual-studio-code - 代码行数旁边的竖线是什么
haskell - 在 haskell 中给 `_` 一个类型签名
python - 为什么我没有从使用编码数据库中得到 SQL 查询的结果?
python - 如何减少 PyQt5 QGridLayout 中两个小部件之间的空间?
amazon-web-services - 为什么 X-Forwarded-Proto 在 Elas