为什么Textify.js只能在HTML中工作而不能在React中工作

Question

我正在尝试将Textify.js添加到网站中。但有些地方工作不正常。我只有在更改代码时才能看到动画。但如果我尝试重新加载、更改页面(反应路由器(等。。。什么也没发生。

我尝试过HTML，一切都很好。

我不太擅长Js/React。。。

谢谢。

import Textify from "textify.js";
new Textify();
export function Home() {
return (
<Container>
<p data-textify>
Some cool text.😎😎
</p>
</Container>
);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 1

该库与react不兼容。

使用它的正确方法是在组件在DOM上完成渲染后，在useEffect中初始化它。

import Textify from "textify.js";
import { useEffect } from "react";
export default function App() {
useEffect(() => {
new Textify();
}, []);
return (
<div className="App">
<p data-textify>Some cool text.😎😎</p>
</div>
);
}