在react中使用或不使用美元登录

Question

我在react函数返回语句中读取了以下代码。

 return(){
      <span className="expense">{charge}</span>
      <span className="amount">${amount}</span>
 }

我的问题是，不管有没有$，它们都只是表示要呈现的动态变量，对吗？我看到${}和{}有时会散布在代码中，我真的很困惑它们是否应该互换。谢谢。

Answer 1

为了将表达式嵌入到JSX中，you'll use only curly braces。$在花括号之外，因此被解释为文本。

 <div>${145}</div>
 // equals
 <div>$145</div>

但是，在template literals内部，嵌入表达式的语法是${...}

 `Amount: ${145}`
 // equals
 `Amount: 145`

Answer 2

你确定你的例子吗？${}是ES6插入字符串的方式。但它应该在反引号中。

例如

let amount = 10
return(
  <div>
    <p>Amount: {amount}</p>
    <p>Amount: ${amount}</p>
    <p>{`Amount: ${amount}`}</p>
  </div>
)

将产生以下输出：

数量: 10

金额$10

数量: 10

也就是说，JSX中的${}不在内部，它只是一个'$‘+从{}返回的字符串。你可以找到更多的here about template literals。