ReactJS: Définition des attributs de style avec des fonctions

Question

Est-il possible de définir des styles CSS en ligne par une fonction? J'essaie de faire ceci:

render() { 
var listStyle = { 
    position: "relative", 
    display:() => { 
     console.log("Still alive") 
     if(this.state.open) { 
      return "block"; 
     } 
     else return "none"; 
    } 
return <li style={listStyle}> 
..... 
} 

En vain. Il ne consignera même pas "Toujours en vie", donc la fonction ne s'exécute même pas. Je sais qu'il n'y a aucun problème à assigner des fonctions aux objets dans JS, alors qu'est-ce qui donne?

Answer 1

Vous pouvez essayer de faire comme ça, plus simple,

var listStyle = { 
    position: "relative", 
    display:this.state.open?'block':'none' 
} 

Je pense que l'objet de style seulement l'accès à la valeur des propriétés

mais si vous aimez vraiment la fonction. vous pouvez utiliser l'auto-exécution fonction anonyme pour le faire fonctionner

var listStyle = { 
    position: "relative", 
    display: (()=>{ 
     console.log('alive') 
     if(this.state.open){ 
      return 'block' 
     }else{ 
      return 'none' 
     } 
    })() 

} 

Answer 2

Vous pouvez aller avec ce

const listStyle = { 
    position: 'relative' 
} 


const checkDisplay = open => { 
    if (open) { 
    return "block" 
    } 
    return "none"; 
} 

<li style={{...listStyle, display: checkDisplay(this.state.open)}}></li> 

Permettez-moi de savoir si ce travail. J'espère que cela peut vous aider :)