如何在将Vue迁移到React时添加多个条件类

Question

在将vue组件迁移到React时，我不明白如何在同一个div标签中应用这些多个类。

在Vue中，

<ul>
<li v-for="m in Menus" @click="moveMenu(m)" class="primaryClass"
:class="{'ur-primay__selected':selectedMenu(m)}"> // selectedMenu() is a method
{{m.name}}
</li>
</ul>

我的问题是，如何将这个额外的非道具类属性添加到React中的标记中？

我尝试过使用templateliteral来添加类，但无法做到这一点。

Answer 1

classnames实用程序在React中具有相同的用途，它接受类似于Vue类绑定的输入，并允许混合字符串、数组和对象。

在Vue:

<li :class="['primaryClass', {'ur-primay__selected': selectedMenu(m)}]"> 

在React中，数组可以被展平，因为它可以向助手提供多个参数：

<li className={classnames('primaryClass', {'ur-primay__selected': selectedMenu(m)})}> 

Answer 2

使用带回溯标记的字符串模板`:

<div className={`${selectedMenu(m)?'ur-primay__selected':''}`}>