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

Question

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

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

我将字母保存在数组中，然后使用 Map 和自定义组件渲染它们，该组件的样式看起来像照片，我在 native react 中这样做，但我认为在 react 中应该是相同的，欢迎任何帮助，谢谢。

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

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

Answer 1

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

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

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
    }));
/>