如何隱藏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中的某些元素

回答

相關問題