反应添加!重要似乎打破了组件重新渲染

Question

我有一个简单的React组件,它接受一个隐藏/显示组件子项的prop.我使用style属性隐藏/显示display: none.如果我使用display: none !important,组件在收到新道具时不再重新渲染.

在render方法中,它看起来像这样:

var style = {};

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

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

以下是完整的示例:https://jsfiddle.net/ccnokes/LnrnrLy2/(相关行从第27行开始)

这里发生了什么？我错过了什么吗？

Answer 1

!important目前不支持 - https://github.com/facebook/react/issues/1881

似乎他们不会很快添加它.

他们提供这个解决方法:

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

但不确定你是否想走这条路.

我能用类开关解决:

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

//jsx
var hideClass;

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

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

更新了 我继续并添加了上面的解决方法.这里的小提琴 - https://jsfiddle.net/kellyjandrews/oan4grme/

不完全是你想要的答案,但它的工作原理:)