Html 如何更改一个元素的状态而不影响具有相同状态的其他元素？

因此，我将尝试快速完成这项工作，当我单击类名为“question”的div时，我希望我的图标从角度向上更改为角度向下，反之亦然（还希望使另一个div可见/不可见）。事情是这样的，我目前正在使用这个.state.icon，所以当我单击一个问题时，所有其他问题的图标也会发生变化（显示内容也是如此），这是我的代码：

我在手机上，所以我打了个电话

所以，我的问题是，我怎样才能更改图标并仅显示我单击的问题的答案

---

提前感谢您的帮助！：）

不确定这正是您想要的，但这是我的解决方案

class CommissionData extends Component {
  constructor() {
    super();

    this.showUpArrow = false;
  }

  onUpdateArrow =()=> {
    this.showUpArrow = !this.showUpArrow
  }

  ...your code
}

通过这种方式，您可以在不使用状态的情况下更新图标和div

Blockquote“事情是这样的，我目前正在使用这个.state.icon，所以当我点击一个问题时，所有其他问题的图标也会发生变化（显示事情也是如此）”

问题是每个问题都有相同的状态。下面显示的块应该被提取到它自己的组件中，并且应该在该组件中保持状态，该状态决定是否展开问题

然后，在父容器中，您可以列出多个组件，例如

组件，并为每个问题/答案提供文本

<div className={styles.category}>
    <h2>Cat</h2>
    <div className={styles.question}>
        <p>Question 1 ?<FontAwesomeIcon className={styles.iconAngle} icon={this.state.icon} /></p>
    </div>
    {
        this.state.showMe
        ? <div className={styles.answer}>
            <className={styles.titleAnswer}>Title 1</h3>
            <p>Answer 1 </p>
        </div>
        : null
    }
</div>

猫
问题1

{
这个。州。秀我
? 
标题1
答复1

：null
}

您可以为频繁更改的内容制作一个单独的键。但我认为这不是一个好的解决办法。您知道

react

维护自己的

DOM

，它比较实际

DOM

中的对象，然后修改实际需要的唯一部分。所以我觉得你的问题与时间无关。你在寻找这样的解决方案吗？手风琴类型或在codesandbox中公开您的代码