css - 如何在 React 组件中围绕文本创建动态数量的圆圈？

Question

每隔 5 秒，我的 React 组件就会访问一个 API，结果会为我提供一个元素列表。

在 sass 中，我想创建与我得到的元素数量相等的圆圈，然后让它们围绕文本旋转。

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

这里是显示文本的代码，我希望圆圈环绕:

<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} Devices Online”。

Answer 1

您可以使用 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>