如何隐藏JSX中的某些元素

我想在我的应用程序上显示膳食'标签'列表。所以根据下面的代码，我能够做到这一点。所以作为代码的结果，我会得到一个列表或一组显示的mealTags。如何隐藏JSX中的某些元素

问题：我想只显示前2个标签，隐藏其余标签并放置一个链接'显示更多，其余部分在我点击它时出现。我如何在ReactJS中执行此操作？

return (
    <View {...otherprops} style={styles.mainContainer} elevation={3}> 
    <View style={styles.contentContainer}> 
     <MealTagsSection mealTags={post.mealTags} /> 
    </View>

type MealTagsProps = { 
    mealTags: Array<MealTag>; 
}; 

export function MealTagsSection(props: MealTagsProps) { 
    let {mealTags} = props; 

    return (
    <View style={styles.mealTagsContainer}> 
     { 
     mealTags.map((mealTag) => { 
      let tagStyle = ''; 
      if (mealTag.category === 1) { 
      tagStyle = styles.tag_healthy; 
      } else { 
      tagStyle = styles.tag_improve; 
      } 
      return (
      <View style={tagStyle}> 
       <Text style={styles.tagText}>{mealTag.description}</Text> 
      </View> 
     ); 
     }) 
     } 
    </View> 
); 
}

来源

2017-05-25 Zhen

您可以在状态下使用设定的可见计数地图前

this.state= { 
    visibleCount:2 
}

和使用切片功能，例如

mealTags.slice(0, this.state.visibleCount).map(...)

然后你就可以增加可视数正如你想在按钮上点击funtion一样。

来源

2017-05-25 08:18:14 Abhishek

谢谢@Ahbishek。只有存在隐藏标签时，我是否也可以获得有关如何检查并显示“加载更多”链接的建议？我可以做这个膳食标签切割功能吗？ – Zhen

你可以在加入更多链接前检查放置一个标志，'{this.state.visibleCount } – Abhishek

另一种选择是跟踪指数的.map块

mealTags.map((mealTag, idx) => ...

和风格据此例如display:none当idx> = 2时

来源

2017-05-31 09:34:37 pscl

如何隐藏JSX中的某些元素

回答

相关问题