如何在 JSX 中隐藏一些元素

Question

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

问题：我想只显示前 2 个标签，隐藏其余标签并在单击时显示其余标签的位置添加 link '显示更多'。我如何在 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之前使用slice函数，例如

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

然后您可以在按钮的 onClick 函数中根据需要增加可见数。

Answer 2

另一种选择是跟踪 .map 块中的索引

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

并相应地设置样式，例如display:none 当 idx >= 2

如何在 JSX 中隐藏一些元素

How to hide some elements in JSX

hide

reactjs

react-jsx

react-native