Выражение вместе со строковым литералом (jsx)?

Question

[Михаил Р.]

Приветствую!

Имеется:

const name = "world";
const element = <h1 className={url}>Hello, world!</h1>;
ReactDOM.render(element, document.getElementById('root'));

Каким образом можно задавать одновременно и строковый литерал и выражение? Например, что хотелось бы получить: <h1 className="class_{url}">Hello, world!</h1> (разумеется, выражение не работает, т.к. находится в строковом литерале).

Конечно, можно использовать модификацию выражения еще до встраивания в jsx, но хотелось бы иметь возможность описанную выше...

const name = "world";
const nameModified = `class_${name}`;
const element = <h1 className={url}>Hello, world!</h1>;

Как быть?

Answer 1

[Антон Спирин]

<h1 className={`class_${url}`}>Hello, world!</h1>

<h1 className={'class_' + url}>Hello, world!</h1>