无法在 React 中使用 NPM 包

Question

我想在我的 React 应用程序中使用 TagCloud，但我无法让它工作。我在控制台中没有收到任何错误消息，它只是没有出现。我在纯 HTML 和 JS 中使用了相同的代码，它在那里工作

由于这个错误，我不得不以另一种方式导入包：

Could not find a declaration file for module 'TagCloud'. 'D:/Javascript/portfolio/node_modules/TagCloud/dist/TagCloud.js' implicitly has an 'any' type.

这是我的 React 组件

import React from 'react';
import './about.scss';

function About() {
  const TagCloud = require('TagCloud');
  const Tags = [
    'JavaScript',
    'CSS',
    'HTML',
    'Vscode',
    'XD',
    'React',
    'Python',
    'Linux',
    'git',
    'Flutter',
    'Dart',
    'Firebase',
    'SASS',
    'JSON',
    'Figma',
  ];

  TagCloud('.content', Tags, {
    radius: 250,
    maxSpeed: 'fast',
    initSpeed: 'fast',
    direction: 135,
    keep: true,
  });
  
  return (
    <div className="About" id="About">
      <div className="left">
        <div className="heading">
          <h1>ABOUT</h1>
        </div>
      </div>
      <div className="right">
        <span className=".content">
        </span>
      </div>
    </div>
  );
}

export default About;

Answer 1

import React, { useEffect, useRef } from 'react'
import TagCloud from 'TagCloud'

const Tags = [
    'JavaScript',
    'CSS',
    'HTML',
    'Vscode',
    'XD',
    'React',
    'Python',
    'Linux',
    'git',
    'Flutter',
    'Dart',
    'Firebase',
    'SASS',
    'JSON',
    'Figma',
]

function App() {
    const IsTagCloudLoaded = useRef(false)

    useEffect(() => {
        if (IsTagCloudLoaded.current) return

        TagCloud('.content', Tags, {
            radius: 250,
            maxSpeed: 'fast',
            initSpeed: 'fast',
            direction: 135,
            keep: true,
        })

        IsTagCloudLoaded.current = true
    }, [])

    return (
        <div className='About' id='About'>
            <div className='left'>
                <div className='heading'>
                    <h1>ABOUT</h1>
                </div>
            </div>
            <div className='right'>
                <div className='content' />
            </div>
        </div>
    )
}

export default App

无法在 React 中使用 NPM 包

Not able to use NPM package in React

reactjs

npm

npm-package

结果