React js -文本球体加载后不渲染

Question

目前在react.js环境中工作，想要添加这个很酷的动画文本球体。我使用一个名为TagCloud的包来帮助渲染所有内容(这里是npm包https://www.npmjs.com/package/TagCloud?activeTab=readme的链接)，但是一旦我导入并设置了所有内容，文本域只会出现一次，当你重新加载网页时，它会消失。

我试过查找视频，如这个- https://www.youtube.com/watch?v=5jlDHSqjZcc -帮助，但仍然以相同的结果球体消失后，你重新加载网页。此外，不确定它是否值得添加，但当我编辑我的TextSphere组件，而react应用程序是打开一个完整的文本球体的其他不想要的副本被生成和显示在网页上。我将附上我的代码下面供参考。提前感谢您的帮助。

react js组件:

import React, { useEffect }from "react";
import TagCloud from "TagCloud";
const TextSphere = () => {
useEffect(() => {
return () => {
const container = ".tagcloud";
const texts = [
'JavaScript', 
'CSS', 
'HTML',
'C', 
'C++', 
'React',
'Python', 
'Java',
'MySQL',
'jQuery',
];
const options = {
radius: 300,
maxSpeed: "normal",
initSpeed: "normal",
keep: true,
};
TagCloud(container, texts, options);
};
}, []);
return (
<div className="text-sphere">
<span className="tagcloud"></span>
</div>
);
};
export default TextSphere;

css文件-

.text-sphere {
position: relative;
top: 0;
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.tagcloud {
display: inline-block;
top: 0;
left: 0;
font-weight: 600;
letter-spacing: 0.0625em;
font-size: 1.3em;
}
.tagcloud--item {
color: black;
text-transform: uppercase;
}
.tagcloud--item:hover {
color: rgb(224, 167, 101);
}

Answer 1

import React, { useEffect, useRef } from "react";
import TagCloud from "TagCloud";
import "./TextSphere.css";
const TextSphere = () => {
const containerRef = useRef(null);
useEffect(() => {
const container = containerRef.current;
const texts = [
"HTML",
"CSS",
"JavaScript",
"NodeJs",
"React",
"MongoDb",
"MySql",
"Git",
"MUI",
"Express",
"GitHub",
"AI",
];
const options = {
radius: 300,
maxSpeed: "normal",
initSpeed: "normal",
keep: true,
loop: true,
lockX: true,
lockY: true,
};
TagCloud(container, texts, options);
return () => {
TagCloud(container, [], {});
};
}, []);
return (
<div className="text-sphere">
<span className="tagcloud" ref={containerRef}></span>
</div>
);
};
export default TextSphere;