Javascript 表达不明白

Question

我是 React 和 Js 的新手，我想了解这行代码（它是 JSX 中的 Js）：

<h5 className="recipes__title">
  {item.recipe.label < 20 ? `${item.recipe.label}` : `${item.recipe.label.substring(0, 25)}...` }
</h5>

有人知道怎么读懂吗？

谢谢！

Answer 1

<h5 className="recipes__title">            //An html header
                                           //Containing... 
  {
    item.recipe.label < 20 ?               // If the item.recipe.label is less than 20 then...

`${item.recipe.label}`                     // the label
: `${item.recipe.label.substring(0, 25)}   //else the first 25 characters of the label followed by 
  ...`                                     // the string "..."     
}
</h5>

您可以了解三元运算符（这是一个有条件地解析为两个表达式之一的表达式）here

您可以了解模板字面量（可以包含 javascript 来解析的字符串）here

Answer 2

JSX part:

<element>
{ // You can put your Javascript here but mostly inline script. }
</element

`${...}`

这是ES6引入的字符串模板。它用于构建字符串。 ${}表示你要处理JS，变量名或调用的函数。

substring(0, 25)

这是检查标签是否最多 25 个字符的部分。如果不是，它会选择前 25 个字符，然后在其后添加省略号 (...)。

Javascript 表达不明白

Javascript expression not understood

javascript

operators

jsx

参考