如何动态添加类反应?

时间:2018-02-26 13:35:32

标签: reactjs react-redux react-dom

在简单的tic-tac游戏中,当有人获胜时,突出显示导致胜利的三个方格。



<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>
&#13;
&#13;
&#13;

在此笔中,您可以在控制台中看到如果您获胜,则会记录获胜的索引。有人可以更新代码,并解释一下吗?

1 个答案:

答案 0 :(得分:3)

编辑 - 2019年1月:

您也可以使用classnames包来执行此操作。该软件包可以找到here,使用方式如下:

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

由于我不明白你的问题,我会回答你在标题上写的问题。

为了动态添加类和响应元素,您可以使用ES2015中的Template Strings功能。

它应该是这样的:

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

然后,一旦状态发生变化,就会添加所选的类。