Javascript 获取并旋转react中的所有下一个类似组件

假设我有一个名为Square的组件，并将其中一些放在应用程序中。我想让其中一个处于活动状态，并且所有下一个方形组件都基于该组件的索引进行旋转。大概是这样的：

<div className="app">
  <Square className={""}/>
  <Square className={"square--active"}/>
  <Square className={""}/>
  <Square className={""}/>
</div>

<div className="app">
  <Square className=""/>
  <Square className="square--active square--rotated"/>
  <Square className="square--rotated"/>
  <Square className="square--rotated"/>
  <Square className="square--rotated"/>
</div>

我将活动类名作为道具传递。因为第二个是活动的，所以第二个正方形和第三个正方形应该旋转90度。我知道如何用vanilla JS来做，但是如何用反应的方式来正确地做呢

编辑：我尝试通过一个可视示例来显示它：

点击第二个正方形后，你会看到第二个正方形和旋转90度后的所有正方形。但是如果我点击第三个，第三个和第四个应该旋转180度

我希望现在一切都清楚了。

---

谢谢。

如果要激活的

Square

索引是固定的，您只需向以下

Square

s添加自定义类名（并在组件内部为其添加样式），如下所示：

<div className="app">
  <Square className={""}/>
  <Square className={"square--active"}/>
  <Square className={""}/>
  <Square className={""}/>
</div>

<div className="app">
  <Square className=""/>
  <Square className="square--active square--rotated"/>
  <Square className="square--rotated"/>
  <Square className="square--rotated"/>
  <Square className="square--rotated"/>
</div>

---

不，它不是固定的，当有人点击其中一个时它会改变，如果你点击第二个，它应该设置为activeok，updated。希望它能给你一个想法。我喜欢你的答案，但等待也许会有更好的答案。如果没有，那么这就是答案。谢谢。您的问题不清楚，您的逻辑不清楚，您提供的代码不足以让我们理解您的意图。提供更多代码，否则我们将浪费时间回答您的问题。