无需 DOM 操作即可动态更改 React jsx class

Question

我正在使用 jsx react 并且想动态设置一个 class 而保持另一个 class 静态所以我想要像下面这样的东西来保持 class type但有一个额外的动态 class change 更改为 class big 或 small 或其他。

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

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

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