我们可以分别为单个 div 元素设置两个类属性吗？答案

【问题标题】：Can we have two class attributes for a single div element separately?我们可以分别为单个 div 元素设置两个类属性吗？
【发布时间】：2020-08-17 05:58:23
【问题描述】：

我正在开发一个 React 应用程序。我想要一个带有条件类的 div，如下所示：

<div class="defaultClass1 defaultClass2" class = {player_color === 1? "bg-green" :"bg-opponent"}>
      <p>Body</p>
</div>

我发现，第二个编写的类完全覆盖了上一个。那么有没有一种简单的方法可以在不重复“bg-green”和“bg-opponent”中的默认类的情况下获得这两个类的效果？

【问题讨论】：

【解决方案1】：

像下面这样的东西应该可以工作。检查并尝试

<div className={"defaultClass1 defaultClass2 " + (player_color === 1? 'bg-green' :'bg-opponent')}>
<p>Body</p>

【讨论】：

谢谢...确实解决了问题..我在浏览时首先没有找到这个解决方案...后来我发现了这个：scriptverse.academy/tutorials/… 这可能对其他人有用！

【解决方案2】：

不，你不能，您可以在 css 中将这些类分开，并且仍然只使用 html 中的 class="class1 class2" 来调用两者。您只需要在一个或多个类名之间留一个空格

【讨论】：

【解决方案3】：

const myClassNames = `defaultClass1 defaultClass2 bg-${player_color === 1 ? 'green' : 'opponent'}
<div class={myClassNames}>
      <p>Body</p>
</div>

或者你可以使用this

【讨论】：