在 ReactJS 中实现 3D 标签云

Question

我知道这可以使用纯 Javascript 中的 jquery 3d 标签云插件轻松完成。但是有人可以告诉我如何在没有 jquery 的情况下创建它（或者如何将 jquery 集成到特定的反应组件中）

Answer 1

嘿，我也在寻找这个问题的答案

我做的是

npm install jquery

下载插件并解压 jquery.svg3dtagcloud.js 文件

反应组件

import $ from 'jquery'
import './jquery.svg3dtagcloud'
class Box extends React.Component {
componentDidMount() {
    const settings ={

   
    }
  this.$el = $(this.el);
  this.$el.svg3DTagCloud(settings)
}
  
render() {
  return (
    <div id="tagcloud" ref={el => this.el = el}></div>
    );
}

挂钩

import $ from 'jquery'
import './jquery.svg3dtagcloud'
export default function Skills() {
    const settings = {
            

    }

    const svgEl = useRef()

    useEffect(() => {
        const $svgEl = $(svgEl.current)
        $svgEl.svg3DTagCloud(settings)
    }, [])

    return (
        <div id="tagcloud" ref={svgEl}></div>
    );

}