Estoy tratando de construir una barra de progreso personalizada usando React. Tengo un porcentaje calculado, quiero establecerlo como ancho de algún elemento div. Actualmente lo probé usando Tailwind CSS:
<div className={"p-1 w-[" + percentage + "%]"}></div>Pero no funciona. Entonces, ¿cómo puedo aplicar este tipo de estilo variable en React?
Suponiendo que tiene las clases de Tailwind necesarias, cree una variable para almacenar las clases para la barra de progreso:
const progressBarClasses = `p-1 w-${progress}`Asigne las clases al div de esta manera:
<div className={progressBarClasses}></div>No puede poner expresiones en JSX simple, debe usar la sintaxis especial de llaves para evaluar una expresión y se resolverá en un valor:
<div className={"p-1 w-[" + percentage + "%]"}></div>