我正在嘗試優化/清理“if”陳述句。正如您所看到的代碼，它看起來……很長而且效率很低。如果你是我，你會如何修復并讓它看起來/作業得更好？
解釋我正在嘗試構建的內容：
- 當分數為 5 時，我想將星星圖示 5 次推入“星星”陣列，
- 當分數為 4 時，我想將星星圖示 4 次推入“星星”陣列，
- 當分數為 3 時，我想將星星圖示 3 次推送到“星星”陣列，
- 當分數為 2 時，我想將星星圖示 2 次推送到“星星”陣列，
- 當分數為 1 時，我想將星星圖示 1 次推送到“星星”陣列。
代碼
import React, { useState } from "react";
import { AiFillStar } from "react-icons/ai";
const Review = ({ title, comment, score }) => {
let stars = [];
if (score == 5) {
stars.push(<AiFillStar />);
stars.push(<AiFillStar />);
stars.push(<AiFillStar />);
stars.push(<AiFillStar />);
stars.push(<AiFillStar />);
}
if (score == 4) {
stars.push(<AiFillStar />);
stars.push(<AiFillStar />);
stars.push(<AiFillStar />);
stars.push(<AiFillStar />);
}
if (score == 3) {
stars.push(<AiFillStar />);
stars.push(<AiFillStar />);
stars.push(<AiFillStar />);
}
if (score == 2) {
stars.push(<AiFillStar />);
stars.push(<AiFillStar />);
}
if (score == 1) {
stars.push(<AiFillStar />);
}
return (
<div className="review-container">
<p>Title: {title}</p>
<p>Comment: {comment}</p>
{/* <p>Score: {star}</p> */}
{stars.map((star) => star)}
</div>
);
};
export default Review;
uj5u.com熱心網友回復：
你正在尋找的是一個for-loop。它stars像你的score高點一樣頻繁地推動。
將let i在for回圈就是它計數到的點INT到達您的迭代器score-variable。
所以如果你score是 5，它會產生 5 次push，如果你score是 1，它會產生 1 次push。
import React, { useState } from "react";
import { AiFillStar } from "react-icons/ai";
const Review = ({ title, comment, score }) => {
let stars = [];
for (let i = 0; i < score; i )
{
stars.push(<AiFillStar />);
}
return (
<div className="review-container">
<p>Title: {title}</p>
<p>Comment: {comment}</p>
{/* <p>Score: {star}</p> */}
{stars.map((star) => star)}
</div>
);
};
export default Review;
uj5u.com熱心網友回復：
不需要任何 for 回圈或 useState。用ES6就可以解決
import React from "react";
import { AiFillStar } from "react-icons/ai";
const Review = ({ title, comment, score }) => {
return (
<div className="review-container">
<p>Title: {title}</p>
<p>Comment: {comment}</p>
{Array.from(Array(score).keys()).map((star) => (
<AiFillStar key={star} />
))}
</div>
)
}
export default Review;
uj5u.com熱心網友回復：
let stars = [];
stars.fill(<AiFillStar />, 0, score)
請參考MDN array.fill()檔案。
然后你可以.map()隨心所欲地覆寫stars陣列。
甚至
[].fill(<AiFillStar />, 0, score).map(star => star)
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/365000.html