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

Question

希望实现以下目标:

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

显然,这符合:

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

在JSX中有一种优雅的方式来评估{}字符串中的表达式吗？

Answer 1

试试这个:

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

请记住,一切之间{,并}仅仅是JavaScript,因此表达的是'total total-' + obj.state,然后将其设置为类DOM节点.

Answer 2

您可以使用react表达式,然后使用javascript es6字符串插值

像这样的东西:

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