时间戳

首页 > 解决方案 > 如何使用 react/react native 在单击时删除或隐藏多个组件

javascript - 如何使用 react/react native 在单击时删除或隐藏多个组件

问题描述

https://res.cloudinary.com/catify/image/upload/v1588704903/hcnqjp7okfykkb3az2v3.jpg

您好，我正在尝试创建一个猜谜游戏的项目，如图所示，我有多个字母组件，答案需要一些字母，而有些则不需要，我需要一个按钮，当我点击它时，它会删除或隐藏答案不需要的组件，我如何使用 react 或 react native 来做到这一点？

我将字母保存在一个数组中，然后使用带有自定义组件的 Map 渲染它们，该组件的样式看起来像照片，我在 react native 中执行此操作，但我认为在 react 中应该是相同的，欢迎提供任何帮助，谢谢。

  return (
    <Animated.View style={{flex: 1}}>
      {Letters.forEach(element => {
        <LetterCard letter={element} />;
      })}

      <Button
        title="eliminar"
        onPress={() => {
          eliminar;
        }}
      />
    </Animated.View>
  );

标签： javascriptreactjsreact-nativedictionary

解决方案

您可能需要一个状态列表或某个地方的列表，其中包含哪些字母是需要的，哪些不是，以及一个布尔值来确定您是显示所有字母还是只显示您需要的字母。

切换显示/隐藏不需要的字母的按钮只会切换 requiredOnly 状态。

this.state={        
    neededLetters = [],   //array of needed letters
    neededOnly = false,
}

{neededOnly ? 
neededLetters.forEach(element => {
    <LetterCard letter={element} />;
}) : 
Letters.forEach(element => {
    <LetterCard letter={element} />;
})}


<Button
    title="eliminate"
    onPress={() => {
      this.setState(prevState => ({
      neededOnly: !prevState.neededOnly
    }));
/>

推荐阅读