Динамически форматировать стили в CSS

Question

Я пытаюсь отобразить значок в столбце вместо его текста с помощью 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>

В описанной выше ситуации, когда «передано»! = «Утверждено», в идеале не должно отображаться значок, а значок звездочки должен отображаться в каждой строке (независимо от того, совпадает ли значение).

В 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>
)