Динамически меняйте класс jsx без манипуляции с DOM

Question

Я использую jsx response и хочу динамически устанавливать класс, сохраняя при этом еще один класс static, поэтому я хочу, чтобы что-то вроде ниже сохраняло класс type, но имел дополнительный динамический класс. change изменить класс 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>