在 CSS 中动态格式化样式

Question

我试图通过 CSS 在列中显示图标而不是其文本。但是，我一直找不到这段代码的正确语法。

我的 reactjs 代码有：


return '<div><span class="fa fa-2x fa-star" style="display : [' + item.Status + ' == approved] ? block: none"></span></div>';    
}

这导致以下代码不起作用：

<div>
<span class="fa fa-2x fa-star" style="display : [submitted == approved] ? block: none"></span>
</div>

在上述情况下 "submitted" != "approved"，理想情况下不应该显示图标，而是每行显示星形图标（无论值匹配与否）。

在 chrome 中，我还尝试了以下代码和许多类似的格式，但其中 none 有效：

我的要求是只有当值 LHS 和 RHS 值匹配时图标才可见，例如："approved" = "approved".

对我有用的解决方案是：

var cssClass = item.Status = "approved" ? "fa fa-2x fa-star" : "myblankcssclass" ; //add various classes using ternary operator.

return '<div><span class=" '+ cssClass + '" </span></div>';    
}

Answer 1

你试试这个：

displayStyle = submitted == approved ? 'block': 'none';
return (
    <div>
        <span class="fa fa-2x fa-star" style={{ display: displayStyle }}></span>
    </div>
)

Answer 2

对我有用的代码：

var cssClass = item.Status = "approved" ? "fa fa-2x fa-star" : "myblankcssclass" ; //add various classes using ternary operator.

return '<div><span class=" '+ cssClass + '" </span></div>';    
}

在 CSS 中动态格式化样式

Dynamically format styles in CSS

html

css

styles

reactjs