Soy un novato que está haciendo el proyecto en React. Lo que estoy tratando de hacer aquí es que estoy tratando de dibujar círculos 1~5 para mostrar los valores de los datos JSON.
El valor de datos JSON recibe de -1 a 9 si el valor de cierta clave es -1, entonces esa clave específica no debe mostrarse con círculos.
si el valor de cierta clave es al menos 0 o >= 0, entonces 0 serían 5 círculos sin color.
si el valor de la clave determinada es 9, entonces habría 4 círculos de colores completos y un círculo de medio color.
He estado atascado en este problema durante 4 días ahora...
{ "result" : { "product_id" : 1 "product_name" : "apple" "rating" : { "rating1" : -1, "rating2" : 4, "rating3" : 9, "rating4" : 2, "rating5" : -1 } } }los datos JSON se ven como arriba
y aquí están los círculos que obtuve
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; } `;Usé componentes con estilo
y estaba tratando de dibujar a través del mapeo de los círculos primero, pero realmente no entiendo cómo podría mostrar la cantidad correcta de círculos según el valor de datos JSON que recibo.
{[2,4,6,8,10].map(index => { return ( <Circles><FullCircleRating index={index} /></Circles> ) })}así es como al principio traté de mostrar 5 círculos.
Si necesitas más información sobre los códigos.
Puede lograrlo calculando la cantidad de círculos completamente coloreados con naranja, la mitad de color y el resto de color gris.
El color completo será la calificación dividida por dos y redondeada hacia abajo Math.floor(rating / 2)
Para la mitad de color, debe verificar si la calificación es impar con la rating % 2 !== 0
Para los de color gris, haga el mismo cálculo que para el naranja pero con la diferencia del máximo (10) menos la calificación redondeada hacia abajo Math.floor((10 - rating) / 2)
Luego, haga algunas discusiones para generar las matrices de elementos.
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>;