es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Cambia el color de la insignia – condición

17 Jun, 2023 Programación

Soy un traductor de documentos de TI en español. Traduce lo siguiente al español. No traduzcas el código y la salida en markdown.

Soy principiante en React. Me gustaría cambiar el color del distintivo según la cantidad de estudiantes registrados. Algo como en la imagen. Si el item.registeredCount (número de estudiantes registrados) = (item.capacity – 1), entonces el color será rojo (por ejemplo, 1/2, 4/5, 10/11, etc.), de lo contrario, el color del distintivo será verde porque la capacidad no está medio llena. En el caso de que item.capacity = 1, el color del distintivo será verde.

Mi código:

{item.registeredCount} / {item.capacidad}

Imagen de ejemplo: https://i.stack.imgur.com/zZ6xd.png

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para cambiar el color del distintivo dependiendo del número de estudiantes registrados, puede utilizar la representación condicional en React. Aquí hay un fragmento de código actualizado para lograr esta funcionalidad:

    <col classname="text-center">
   <div>
      <badge bg="{item.registeredCount" =="=" item.capacity="" -="" 1="" "danger"="" :="" "success"}="">
        {item.registeredCount} / {item.capacity}
      </badge>
   </div>

    En este código actualizado, el atributo bg del componente <badge> se establece en el valor de la expresión condicional. Si item.registeredCount es igual a item.capacity - 1, el color del distintivo será rojo (danger), de lo contrario, será verde (success).

    Tenga en cuenta que este código asume que item.capacity siempre será mayor o igual a 1. Si existe la posibilidad de que item.capacity sea 0 o un número negativo, se requerirá lógica condicional adicional.

Comments are closed.