Javascript 如何在react native中使用if条件渲染元素？

我有一个用户配置文件页面，每个用户有一个从0到5的比率。 我想根据用户的排名来填充星星。 e、 g.如果用户费率为4，我需要填写4颗星，1颗星为空

以下是我在render方法中的代码：

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

{item.rate}//这里我得到了从api 0到5的速率

由于您的星星数不会改变，而只会改变它们的颜色，因此在每个图标上使用

颜色={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>

{item.rate}
= 1 ? '#9fa1a7'：'#ffffff'}type=“solid”size={16}/>
= 2 ? '#9fa1a7'：'#ffffff'}type=“solid”size={16}/>
= 3 ? '#9fa1a7'：'#ffffff'}type=“solid”size={16}/>
= 4 ? '#9fa1a7'：'#ffffff'}type=“solid”size={16}/>
= 5 ? '#9fa1a7'：'#ffffff'}type=“solid”size={16}/>

或者从阵列生成星星以减少重复：

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

{item.rate}
{
[1,2,3,4,5]。地图（得分=>
=得分？'#9fa1a7'：'#ffffff'}
type=“固体”
大小={16}
/>
)
}

注意：这回答了“如何有条件地呈现组件”（即问题的标题），但改变星形颜色的方法将更好地解决OPs问题

---

可以有条件地渲染组件，如下所示：

<View>
  {condition && <Component />}
</View>

{条件&&}

在这里，您希望渲染速率覆盖的每个星星，因此您正在寻找以下内容：

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

{item.rate>0&&}
{item.rate>1&&}
{item.rate>2&&}
{/*etc.*/}

const itemarry=new Array（）.fill（item.rate）；
render（）{
{item.rate}//这里我得到了从api 0到5的速率
{itemarry.map（（项，索引），（）=>
)}

---

}

恒星的数量不会改变，只有它们的colors@jo_va是的，你的回答更好地解决了老年退休金问题（因此我投了赞成票）。然而，这个问题确实问到了如何有条件地渲染组件，所以我决定把这个问题留在这里，因为它回答了这个方面。你是对的，问题不是很清楚，这是一个有效的解决方案，+1这是怎么回事，每个星星都有相同的颜色我以为他只是问打印星星。没有灰色的星星。如果评级为3，那么它将打印3颗星。或者，以一种更优雅的方式（我认为），您可以使用

[…数组（5）].map（…）

，而不是编写整个五颗星数组elements@Milore，很好的建议，

[1,2,3,4,5]

更短。另外，我会使用

Array.from（{length:5}，（u，I）=>I）

来获得一个范围。是的，我的建议在不同的比赛中是合理的，例如在一个有更多元素的比赛中render@Milore，当然可以，但您只能获得一个

未定义的
值数组
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>