Reagire aggiungendo! Importante sembra interrompere il re-rendering del componente

Question

Ho un semplice componente React che accetta un puntello che nasconde/mostra i figli di un componente. Nascondo/mostro usando l'attributo style e display: none. Se utilizzo display: none !important, il componente non esegue più il re-rendering quando riceve nuovi oggetti di scena.

All'interno del metodo di rendering, sembra che questo:

var style = {}; 

if(shouldHide) { 
    //this works 
    style = { 
     display: 'none' 
    }; 
    //this does not 
    //style = { 
    // display: 'none !important' 
    //}; 
} 

return (
    <span style={style} {...this.props} /> 
); 

Ecco l'esempio completo: https://jsfiddle.net/ccnokes/LnrnrLy2/ (linee rilevanti inizio alla linea 27)

Che cosa sta succedendo qui? Mi sto perdendo qualcosa?

Answer 1

!important è attualmente supportato - https://github.com/facebook/react/issues/1881

Non appare saranno aggiungendolo in qualunque momento presto.

Essi offrono questo come una soluzione alternativa:

var sheet = document.createElement('style'); 
document.body.appendChild(sheet); 
sheet.innerHTML = 'html {font-size: 1em !important;}'; 

Ma non è sicuro se si vuole andare su questa strada oppure no.

sono stato in grado di risolvere con un interruttore classe:

//css 
.hidden {display: none !important}; 

//jsx 
var hideClass; 

if(shouldHide) { 
    hideClass = "hidden"; 
} 

return (
    <span className={hideClass} {...this.props} /> 
); 

Aggiornato sono andato avanti e ha aggiunto la soluzione precedente. e il violino qui - https://jsfiddle.net/kellyjandrews/oan4grme/

Non

esattamente la risposta che volevano, ma funziona :)