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/

不完全是您想要的答案，但它有效：）

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

1 个答案: