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

编程问答 2022-08-14

问题描述

我正在使用CircleType.js库，该库允许您弯曲文本字符串/将其渲染为圆形。但是，我对React还是很陌生，我不确定如何在React中使用该库。我创建了一个功能组件，并使用了CircleType页面中提供的文档来创建...，但我不断收到'TypeError：无法读取属性'innerHTML'为null'的错误。

NONANTIALIASED_QUALITY

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

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

解决方法

尝试

    useEffect(() => {
   const circleOfSkills = new CircleType(document.getElementById('rounded-text'))
   .radius(100)
   return circleOfSkills.mount()
 },[]);
,

尝试像这样在useEffect中移动const：

a|d|m|i|n|9|9|

在useEffect之外调用getElementById将给您空错误，因为该元素尚未在页面上呈现。

,

这里是带有React useRef钩子的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

,

使用react时，我会避免在组件内部使用getElementbyID。在index.html中定义一个根，然后通过{p>在index.js中将其链接 

import React from "react";
import ReactDOM from "react-dom";
import App from "./App"; //App is your base react component

ReactDOM.render(
   <App />
  document.getElementById("root")
);

它将为您免除这种头痛以及将来的头痛。 React组件就像一棵树，通过仅定义一个根，您就可以利用为React构建的对象。

external-javascript-libraryjavascriptreactjsreactjsreactjsreactjs