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>

在上述情况下，当"提交"！="已批准"时，理想情况下，它不应该显示图标，而是在每一行中显示出星图标(无论值是否匹配(。

在Chrome中，我还尝试了以下代码和许多类似格式，但它们都没有工作：

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

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

<span class="fa fa-2x fa-star" style="display : "rejected" == "approved" ? block : none"></span>

我的要求是，只有在值LHS和RHS值匹配时才可以看到图标，例如："批准" ="批准"。

对我有用的解决方案是：

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>';    
}