javascript - 在功能组件中使用外部js库

Question

我正在使用 CircleType.js 库，它允许您弯曲文本字符串/将其渲染为圆形。然而，我对 React 很陌生，我不知道如何在 React 中使用这个库。我创建了一个功能组件并使用 CircleType 页面中提供的文档来创建...但我不断收到“TypeError: Cannot read property 'innerHTML' of null”错误。

import React, {useEffect} from 'react'
import CircleType from 'circletype'

function RotatingCircle() { 

    // const circleOfSkills = new CircleType(document.getElementById('rounded-text'))
    // .radius(100)
    // useEffect(() => {

    //     return () => circleOfSkills.mount()
    //   }, [circleOfSkills])

    return ( 
            <p className="circle" id="rounded-text">
                AND THE WORLD KEEPS GOING AROUND AND AROUND AND AROUND
            </p>
    )
}

export default RotatingCircle

我读到我可能需要使用 refs，但我真的不确定如何使用它，因为我看到的所有示例都使用类组件。我看到的另一个论坛建议使用 useEffect，但我显然没有正确使用它。

如何在功能组件中引用 DOM 元素？

Answer 1

这是使用 React useRef 钩子(Hook)实现 CircleType 的示例。避免使用 getElementById 进行 DOM 操作，因为它不是 React 方式。

示例代码和CodeSandbox链接:

import React, { useEffect, useRef } from "react";
import "./styles.css";
import CircleType from "circletype";

export default function App() {
  const circleInstance = useRef();

  useEffect(() => {
    new CircleType(circleInstance.current).radius(100);
  }, []);

  return (
    <div className="App">
      <div ref={circleInstance}>abcdef</div>
    </div>
  );
}

CodeSandbox