如何在反应中动态添加类？

Question

在简单的井字游戏中，当有人获胜时，突出显示导致获胜的三个方格。

<p data-height="265" data-theme-id="0" data-slug-hash="PQyERJ" data-default-tab="js,result" data-user="akshgods" data-embed-version="2" data-pen-title="Simple tic tac game" class="codepen">See the Pen <a href="https://codepen.io/akshgods/pen/PQyERJ/">Simple tic tac game</a> by ganesh (<a href="https://codepen.io/akshgods">@akshgods</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

在这支笔中，您可以在控制台中看到如果您获胜，就会记录获胜指数。有人可以更新代码并解释一下吗？

Answer 1

编辑 - 2019 年 1 月：

您也可以使用该classnames包来做到这一点。可以在此处找到该软件包并按如下方式使用：

classNames('foo', { bar: true }); -> The result classes will be 'foo bar'.
classNames('foo', { bar: false }); -> The result class will be just 'foo'.

由于我不明白您的问题，我将回答您在标题上写的问题。

为了在反应中动态添加类和元素，您可以使用ES2015 中的模板字符串功能。

它应该是这样的：

<div className={`main-class ${this.state.isSelected ? 'selected':''}`}></div>

然后一旦状态改变，就会添加选定的类。