Problema extraño aquí. Tengo una barra de progreso que se ve así:
1 export default function PercentageBar(props) { 2 return ( 3 <div className="w-full h-1 my-1 bg-stone-200"> 4 <div className={`h-1 bg-orange-500 w-[${props.percent}%]`} /> 5 </div> 6 ); 7 } El estilo se realiza a través de Tailwind CSS. Si no está familiarizado, básicamente lo que sucede es que el div externo es tan ancho como el div principal, tiene una altura de 1, un margen en la parte superior e inferior de 1 y está coloreado en un tono grisáceo. Luego, el div interno se representa encima de eso, que también tiene una altura de 1. El div interno está en naranja y es tan ancho como props.percent (un porcentaje del ancho total del div principal).
He verificado que props.percent se transfiere correctamente.
Cuando props.percent cambia dinámicamente en tiempo de ejecución, la línea 4 en particular a veces actúa de manera extraña (independientemente del porcentaje pasado).
Por ejemplo, si props.percent era igual a 48 y ahora es igual a 52, Inspect Element me dice que la línea es
<div className={`h-1 bg-orange-500 w-[52%]`} />cual es correcta. Sin embargo, se representa como a continuación (una barra completa)
<div className={`h-1 bg-orange-500 w-[100%]`} /> Además, a veces se representa como props.percent igual a 0. Esto solo ocurre después de props.percent cambia de valor.
He intentado hacer actualizaciones completas, restablecer cachés, etc., pero el problema persiste esporádicamente y en diferentes navegadores. Si actualizo lo suficiente, a veces el problema no aparece. ¿Alguna idea de lo que está pasando aquí? ¡Muy apreciado!
Tengo el mismo problema similar, pero con los classNames de clase para abordar esto, he enviado los classNames de clase desde donde estoy ! el component component palabra clave important es cualquier cosa que cambie su clase. Espero que esto resuelva tu problema.
export default function PercentageBar({witdhPercentage}) { return ( <div className="w-full h-1 my-1 bg-stone-200"> <div className={`h-1 bg-orange-500 ${witdhPercentage}`} /> </div> ); } <PercentageBar witdhPercentage={`!${w-[${props.percent}%]}`} />Si está utilizando Tailwind 3 (o Tailwind 2 en modo JIT), no puede crear clases dinámicamente, ya que no se incluirán en el CSS final.
Para su valor variable, podría considerar usar un apoyo de style en su lugar para establecer el ancho. Por ejemplo:
<div style={{width: `${props.percent}%`}} className={'h-1 bg-orange-500'} />¡Encontré la respuesta! Gracias a Ed Lucas por señalarme en la dirección correcta. Tiene razón: no puedes crear nombres de clase dinámicamente en Tailwind. Puede encontrar la explicación sobre eso aquí .
Sin embargo, usar la etiqueta de estilo que sugirió Ed no funcionó para mí. En cambio, lo que hice fue crear una nueva función que contiene una declaración de cambio que devuelve cadenas ininterrumpidas de nombres de clase para cada valor de ancho. En otras palabras:
function getWidthClassName(percent) { switch (percent) { case 0: return 'w-[0%]'; case 1: return 'w-[1%]'; case 2: return 'w-[2%]'; ... case 99: return 'w-[99%]'; case 100: return 'w-[100%]'; default: return 'w-[0%]'; } }Luego, mi barra de progreso se veía así:
export default function PercentageBar({percent}) { let widthClassName = getWidthClassName(percent); return ( <div className="w-full h-1 my-1 bg-stone-200"> <div className={`h-1 bg-orange-500 ${widthClassName}`} /> </div> );Esto funciona porque en lugar de construir dinámicamente nombres de clase en tiempo de ejecución, ahora los construimos estáticamente. Tailwind está feliz y nosotros estamos felices.