0
votes

Comment ajouter différents styles à la balise de span en fonction de son contenu en utilisant React ou JavaScript?

J'ai un élément d'enveloppe comme ci-dessous, et je veux modifier la couleur Count_Variable en fonction de sa valeur.

value is 0 i want its color to be red
value is 1 want its color to be blue
value is greater than 1 its color to be green

javascript reactjs css

0 commentaires

4 Réponses :

0
votes

Vous pouvez le faire avec l'aide de Opérateur ternaire xxx

0 commentaires

0
votes

render = () => {
  const count = this.get_count(); //this function returns an 
  return (
      <div>
          <span>counter</span>
          <span style={color: count === 0 ? 'red' : count === 1 ? 'blue' : 'green'}>{count}</span>
      </div>
    )
}

0 commentaires

0
votes

Vous pouvez faire quelque chose comme ceci:

render = () => {
    const count_variable = this.get_count(); //this function returns an
    //integer variable

    let color = "";
    switch(count_variable) {
        case 0: color = "red"; break;
        case 1: color = "blue"; break;
        case 2: color = "green"; break;
        // Add more cases here for more colors
    }

    return (
        <div>
            <span>counter</span>
            <span style={{color: color}}>{count_variable}</span>
        </div>
    )
}

0 commentaires

0
votes

Cela devrait fonctionner pour vous, c'est une bonne lecture https://reactjs.org/ DOCS / DOM-ELEMENT.HTML

let divStyle = {
  color: 'blue'
};

render = () => {
    const count_variable = this.get_count(); //this function returns an 
    //integer variable
    if (count_variable===0)
        divStyle.color = 'red'
    else if (count_variable===1)
        divstyle.color = 'blue'
    else
        divstyle.color = 'green'
    return (
        <div>
            <span>counter</span>
            <span style={divStyle}>{count_variable}</span>
        </div>
    )
}

0 commentaires