React dodając! Ważne wydaje się przerwać ponowne renderowanie komponentu

Question

Mam prosty komponent React, który akceptuje rekwizyt, który ukrywa/pokazuje dzieci komponentu. Ukrywam/pokazuję, używając atrybutu stylu i display: none. Jeśli użyję display: none !important, komponent przestanie się wyświetlać ponownie po otrzymaniu nowych rekwizytów.

wewnątrz metody renderowania, wygląda to tak:

var style = {}; 

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

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

Oto pełny przykład: https://jsfiddle.net/ccnokes/LnrnrLy2/ (odpowiednie linie zaczynają się od linii 27)

Co tu się dzieje? Czy czegoś brakuje?

Answer 1

!important jest obecnie nieobsługiwane - https://github.com/facebook/react/issues/1881

Nie pojawia będą dodając go w najbliższym czasie.

Oferują one to jako obejście:

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

Ale nie wiem, czy chcesz iść tą drogą, czy nie.

udało mi się rozwiązać za pomocą przełącznika klasy:

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

//jsx 
var hideClass; 

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

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

Updated poszedł do przodu i dodaje obejście powyżej. I skrzypce tutaj - https://jsfiddle.net/kellyjandrews/oan4grme/

Niezupełnie odpowiedź chciał, ale działa :)