Question

我想在我的应用程序上显示一份“餐馆标签”列表。所以基于下面的代码，我能够做到这一点。因此，作为代码的结果，我将显示一个列表或一组mealTag。

问题：我想只显示前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>
  );
}

Answer 1

您可以在州使用设置可见计数

this.state= {
   visibleCount:2
}

并在map之前使用切片函数，例如

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

然后，您可以在按钮onClick功能上增加可视计数。

Answer 2

另一种选择是跟踪.map块

中的索引

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

并相应地设计风格，例如当idx＆gt; = 2

时display:none

如何在JSX中隐藏一些元素

2 个答案: