reactjs - React 添加 !important 似乎会破坏组件重新渲染

Question

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

在渲染方法中，它看起来像这样:

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} />
);

已更新我继续添加了上面的解决方法。还有这里的 fiddle - https://jsfiddle.net/kellyjandrews/oan4grme/

不完全是您想要的答案，但它有效:)