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

【问题标题】：How to render elements with if conditions in react-native?如何在 react-native 中使用 if 条件渲染元素？
【发布时间】：2019-08-31 14:43:27
【问题描述】：

我有一个用户个人资料页面，每个用户的费率从 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>

【问题讨论】：

标签： javascript react-native jsx

【解决方案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>

【讨论】：

或者，以更优雅的方式（我认为），您可以使用[...Array(5)].map(...) 而不是编写整个五个元素的数组
@Milore，很好的建议，但是，[1, 2, 3, 4, 5] 更短。另外我会使用Array.from({ length: 5 }, (_, i) => i) 来获取范围。
是的，我的建议在另一场比赛中是合理的，例如在一个需要渲染更多元素的比赛中
@Milore，绝对是，但你只会得到一个 undefined 值的数组

【解决方案2】：

注意：这回答了“如何有条件地渲染组件”（即问题的标题），但改变星形颜色的方法将更好地解决 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>

【讨论】：

星星数量不变，只有颜色
@jo_va true，你的回答更好地解决了 OPs 问题（因此我赞成）。然而，这个问题确实询问了如何有条件地渲染组件，所以我决定把它留在这里，因为它回答了这个方面。
你说得对，问题不是很清楚，这是有效的解决方案，+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>

}

【讨论】：

这怎么行，每颗星星的颜色都一样
我以为他只是在问印刷明星。没有灰色的星星。如果评级是 3，那么它将打印 3 颗星。