React : Text and ternary combination not working

Question

I want to display class of a div depends on the state of isAddingVarian or isEditingVarian if both of them is true the class will be float-right d-one and if false it will be float-right . i know i can do like this

<div class={isAddingVarian || isEditingVarian?'float-right d-none':'float-right'}>

but i want something like this

<div class={"float-right "+isAddingVarian || isEditingVarian?"d-none":''}>

how can i do that?

Answer 1

尝试这个

<div className={`float-right ${isAddingVarian || isEditingVarian? "d-none":''} `}></div>

Answer 2

The way you have it set up you will never make it to your ternary expression, a string containing chars will always be true, and the || operator returns the first true value.

You just need to rethink the logic and set it up differently.