Как отображать элементы с условиями if в react-native?

#javascript #react-native #jsx

Вопрос:

У меня есть страница профиля для пользователей, у каждого пользователя есть скорость от 0 до 5. Я хочу заполнить звезды на основе ранга пользователя. например, если скорость пользователя равна 4, мне нужно заполнить 4 звезды, а 1 звезда должна быть пустой

вот мой код в методе рендеринга:

 <Text>{item.rate}</Text> // here I get the rate from api 0 to 5
<View>
    <Icon name="star" color="#9fa1a7" type="solid" size={16}/>
    <Icon name="star" color="#9fa1a7" type="solid" size={16}/>
    <Icon name="star" color="#9fa1a7" type="solid" size={16}/>
    <Icon name="star" color="#9fa1a7" type="solid" size={16}/>
    <Icon name="star" color="#ffffff" type="solid" size={16}/>
</View>

Ответ №1:

Поскольку количество звездочек не меняется, а меняются только их цвета, используйте color={item.rate >= X ? 'color on' : 'color off'} для каждого значка:

 <Text>{item.rate}</Text>
<View>
    <Icon name="star" color={item.rate >= 1 ? '#9fa1a7' : '#ffffff'} type="solid" size={16}/>
    <Icon name="star" color={item.rate >= 2 ? '#9fa1a7' : '#ffffff'} type="solid" size={16}/>
    <Icon name="star" color={item.rate >= 3 ? '#9fa1a7' : '#ffffff'} type="solid" size={16}/>
    <Icon name="star" color={item.rate >= 4 ? '#9fa1a7' : '#ffffff'} type="solid" size={16}/>
    <Icon name="star" color={item.rate >= 5 ? '#9fa1a7' : '#ffffff'} type="solid" size={16}/>
</View>

Или генерировать звезды из массива, чтобы уменьшить повторение:

 <Text>{item.rate}</Text>
<View>{
    [1, 2, 3, 4, 5].map(score =>
        <Icon
            name="star"
            color={item.rate >= score ? '#9fa1a7' : '#ffffff'}
            type="solid"
            size={16}
         />
    )
}</View>

1. Или, более элегантным способом (я думаю), вы можете использовать [...Array(5)].map(...) вместо записи весь массив из пяти элементов

2. @Milore, хорошее предложение, однако, [1, 2, 3, 4, 5] короче. Также я бы использовал Array.from({ length: 5 }, (_, i) => i) вместо этого, чтобы получить диапазон.

3. Да, мое предложение разумно в другом конкурсе, например, в одном с большим количеством элементов для рендеринга

4. @Milore, безусловно, но вы получите только массив undefined значений, хотя

Ответ №2:

Примечание: это отвечает на вопрос «как условно отобразить компонент» (т. Е. Заголовок вопроса), но подход, который изменяет цвет звезды, лучше решит проблему OPs.

Вы можете условно отобразить компонент, как показано ниже:

 <View>
  {condition amp;amp; <Component />}
</View>

Здесь вы хотите отобразить каждую звезду, покрытую rate, поэтому вы ищете что-то вроде этого:

 <View>
  {item.rate > 0 amp;amp; <Icon name="star" color="#9fa1a7" type="solid" size={16}/>}
  {item.rate > 1 amp;amp; <Icon name="star" color="#9fa1a7" type="solid" size={16}/>}
  {item.rate > 2 amp;amp; <Icon name="star" color="#9fa1a7" type="solid" size={16}/>}
  {/* etc. */}
</View>

1. Количество звездочек не меняется, только их цвета

2. @jo_va верно, и ваш ответ лучше решает проблему OPs (отсюда и мой голос). Однако вопрос заключается в том, как условно отображать компоненты, поэтому я решил оставить это здесь, поскольку он отвечает на этот аспект.

3. Вы правы, вопрос не так ясен, это правильное решение, 1

Ответ №3:

 const itemarry=new Array().fill(item.rate);
 render(){
 <Text>{item.rate}</Text> // here I get the rate from api 0 to 5
  <View>
    {itemarry.map((item,index),()=>
    <Icon name="star" color="#9fa1a7" type="solid" size={16} />
    )}
  </View>

}

1. Как это может работать, каждая звезда будет иметь одинаковый цвет

2. Я думал, что он спрашивает только о печатной звезде. нет звездочек серого цвета. если рейтинг равен 3, то будет напечатано 3 звезды.