我如何用字符串中的表达式插入 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，因此表达式为 'total total-' + obj.state，然后将其设置为 class DOM节点。

Answer 2

您可以使用反应表达式，然后使用 javascript es6 string interpolation

像这样：

<div someProp={`${SomeConstOrVariableOrExpression} simple text`}></div>

How can I interpolate JSX with an expression in a string?