Javascript выражение не понято

Question

Я новичок в React и Js, и я хотел бы понять эту строку кода (это Js внутри JSX):

<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>

Вы можете узнать о троичном операторе (который является выражением, условно разрешающим одно из двух выражений) здесь

Вы можете узнать о литералах шаблона (которые строки, которые могут содержать javascript для разрешения) здесь

Answer 2

1. JSX часть:

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

`$ {...}`

Это шаблон строки, введенный в ES6. Его использовали для построения строки. ${} означает, что вы хотите обработать JS, имя переменной или вызванную функцию.

substring (0, 25)

Эта часть проверяет, содержит ли метка максимум 25 символов. Если нет, он выбирает первые 25 символов, а затем добавляет многоточие (...) после него.

Ссылка

• Шаблон строки
• String.substring