reactjs - 如何使用字符串中的表达式插入 JSX？

Question

希望实现以下目标:

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

显然这会编译为:

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

JSX 中是否有一种优雅的方式来计算字符串中 {} 中的表达式？

Answer 1

试试这个(ES5):

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

或者使用 ES6+

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

请记住，{ 和 } 之间的所有内容都只是 Javascript，因此表达式为 'totaltotal-' + obj.state，即然后设置为DOM节点的类。