Html CSS中的动态格式样式

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

我的代码有：

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>

在上述情况下，当“提交”！=“approved”，理想情况下不应显示图标，但每行都会显示星形图标（无论值是否匹配）

在chrome中，我也尝试过以下代码和许多类似的格式，但都不起作用：

我的要求是，图标应仅在值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>';    
}

var cssClass=item.Status=“已批准”？“fa-2x fa星”：“myblankcssclass”//使用三元运算符添加各种类。
返回'您可以尝试以下操作：

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

displayStyle=已提交==已批准？“块'：'无'；
返回(
)
为我工作的代码：

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

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

var cssClass=item.Status=“已批准”？“fa-2x fa星”：“myblankcssclass”//使用三元运算符添加各种类。
return'我修改了代码以适合您的格式，它返回[object]。代码如下：render:function（data，type，item，meta）{var displayStyle=item.Status==“approved”？“block”：“none”；return（）}}虽然这不是答案，但它让我有了一个想法，并且该部分工作正常。