无需 DOM 操作即可动态更改 react jsx 类答案

【问题标题】：Change react jsx class dynamically without DOM manipulation无需 DOM 操作即可动态更改 react jsx 类
【发布时间】：2017-01-20 10:35:26
【问题描述】：

我正在使用 jsx react 并希望动态设置一个类同时保持另一个类静态所以我想要类似下面的东西来保持类 type 但有一个额外的动态类 change 更改为类 big 或small 或其他。

<p className="type {change}">{pokeType}</p>

有没有办法在不使用 element.setAttribute 或 document.getElementById...className 或 jQuery 的情况下做这样的事情？还是只能通过 DOM 操作来完成这种事情？

【问题讨论】：

标签： javascript jquery html reactjs react-jsx

【解决方案1】：

您的组件状态中需要有change：

this.setState({ change: 'myClass1'})

// will yield <p className="type myClass1">...</p>
<p className={`type ${this.state.change}`}>{pokeType}</p> 

this.setState({ change: 'myClass2'})

// will yield <p className="type myClass2">...</p>
<p className={`type ${this.state.change}`}>{pokeType}</p>

【讨论】：