[解決済み] 文字列中の式でJSXを補間するには？

質問

次のようなことを実現したいと考えています。

<div className="total total-{obj.state}">

明らかにこれはコンパイルされます。

<div class="total total-{obj.state}">

の式を評価するJSXのエレガントな方法はありますか？ {} を文字列内で使用することはできますか？

どのように解決するのですか？

これ(ES5)を試してみてください。

<div className={'total total-' + obj.state}>...</div>

またはES6+の場合

<div className={`total total-${obj.state}`}>...</div>

の間はすべて { と } は単なるJavascriptなので、式は 'total total-' + obj.state となり、DOMノードのクラスとして設定されます。