css - 如何在React组件中使文本周围的圆圈数动态变化？

每隔5秒钟，我的React Component就会命中一个API，从而为我提供了一个项目列表。

用无礼的话，我想创建与我要获得的项目数量相等的圆圈，然后使它们围绕文本旋转。

这些项目基本上代表了我的应用程序中的在线设备列表。

这是显示我希望圆圈围绕的文本的代码：

<div className="devices-online">{this.state.devices.length}</div>
<div className="devices-label">
    <p>Devices</p>
    <p>Online</p>
</div>

圈数应等于：
    this.state.devices.length

因此，圆圈应该绕着上面的文字旋转：“ {this.state.devices.length}在线设备”。

最佳答案

您可以使用CSS动画和类来实现类似的功能。

该动画比您要寻找的要复杂一些，但可以针对您的用例进行修改/简化。 https://codepen.io/belal-mrb/pen/dvBgOP

您可以使用动画的css类为每个圆圈渲染一个元素，如下所示：

<div>
    {new Array({this.state.devices.length}).map(i =>
        <div key={i} className="circle custom-animation-class" />)}
</div>