reactjs - 如何在 react 中动态添加类?

标签 reactjs react-redux react-dom

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

<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>

在这支笔中,如果你赢了,你可以在控制台中看到,获胜的索引被记录下来。有人可以更新代码并解释一下吗?

最佳答案

编辑 - 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'.

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

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

应该是这样的:

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

然后一旦状态改变,所选的类就会被添加。

关于reactjs - 如何在 react 中动态添加类?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48989828/

相关文章:

javascript - this.refs.something 返回 "undefined"

javascript - React Render 被调用两次,第二次未定义 Props

reactjs - Redux-saga 与 Internet Explorer

reactjs - 'HTMLElement | null' 类型的参数不能分配给 'Element' 类型的参数。类型 'null' 不可分配给类型 'Element' .ts(2345)

javascript - React JS 中的 registerServiceWorker 做了什么?

javascript - 在一个函数中使用来自多个 promise 的响应

reactjs - 为什么 react useQuery() 在突变后不获取最新数据?

javascript - 无法在 jsx 中使用条件语法显示未找到的信息

javascript - 如何将外部库导入到 ReactJS 应用程序中(本地)

javascript - 更新 redux 中的嵌套状态