如何使用字符串中的表达式插入 JSX? [英] How can I interpolate JSX with an expression in a string?

问题描述

希望实现以下目标:

显然编译为:

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

解决方案

试试这个 (ES5):

...

或者使用 ES6+

...

记住 { 和 } 之间的一切都只是 Javascript，所以表达式是 'total total-' + obj.state然后设置为DOM节点的类.

Looking to achieve the following:

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

Obviously this compiles to:

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

Is there an elegant way in JSX to evaluate the expression in the {} within a string?

解决方案

Try this (ES5):

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

Or with ES6+

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

Remember that everything between { and } is just Javascript, so the expression is 'total total-' + obj.state which is then set as the class of the DOM node.

这篇关于如何使用字符串中的表达式插入 JSX?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！