Блог

Я просматриваю учебное пособие и не могу понять логику, лежащую в основе части рейтинга, в которой будут показаны некоторые звезды в соответствии с номером рейтинга. Например, рейтинг составляет около 4,5, звезды будут равны 4 с половиной звездам.

 const Rating = ({ value, text }) => {
    return (
        <div class="flat-star style-1">
            <i className={value >=1 ? 
                'fa fa-star' : 
                value >= 0.5 
                ? 'fa fa-star-half-o' 
                : 'fa fa-star-o' 
            }></i>

         <i className={value >=2 ?  
                'fa fa-star' : 
                value >= 1.5 
                ? 'fa fa-star-half-o' 
                : 'fa fa-star-o' 
            }></i>

<i className={value >=3 ?  
                'fa fa-star' : 
                value >= 2.5 
                ? 'fa fa-star-half-o' 
                : 'fa fa-star-o' 
            }></i>

<i className={value >=4 ?  
                'fa fa-star' : 
                value >= 3.5 
                ? 'fa fa-star-half-o' 
                : 'fa fa-star-o' 
            }></i>

<i className={value >= 5 ?  
                'fa fa-star' : 
                value >= 4.5 
                ? 'fa fa-star-half-o' 
                : 'fa fa-star-o' 
            }></i>  
            
           <span>({text amp;amp; text})</span>
        </div>
    )
}
  

Кто-нибудь может объяснить мне эту строку в строке с точки зрения непрофессионала? Извините, новичок здесь.

Итак, у вас есть пять i элементов, каждый из которых соответствует звезде, и логика выглядит следующим образом:

для данного value мы проверим все пять звезд, начиная с первой:

 <i className={value >=1 ? 
            'fa fa-star' : 
            value >= 0.5 
            ? 'fa fa-star-half-o' 
            : 'fa fa-star-o' 
        }></i>
  

давайте сначала проанализируем это i :

1- если value >= 1 тогда дайте ему имя класса fa fa-star , которое является полной звездой.

2- else, если value меньше 1 , но больше или равно 0.5 , тогда дайте ему имя класса fa fa-star-half-o , равное половине звезды.

таким образом, он всегда отображает половину звезды, между и нет процентной звезды 0.5 1 .

3- else, если value меньше, чем 0.5 тогда дайте ему className fa fa-star-o , который является пустой звездой.

таким образом, он всегда отображает пустую звезду, между и нет процентной звезды 0 0.5 .

и так далее для всех остальных четырех звезд. Я надеюсь, что это имеет смысл для вас.