我使用 NextJS 和 splt.js 为我的页面创建文本动画。我在渲染函数中有一个
useEffect
初始化splt({})
函数。
似乎 JSX 的渲染是定时的,所以
splt
函数正在分裂自己。 例如,第一次迭代会接受这个:
['H', 'e', 'l', 'l', 'o', ' ', 'w', 'o', 'r', 'l', 'd']
并输出:
<span id="c1" class="char" style="display: inline-block; overflow: hidden; vertical-align: top;">H</span><span id="c2" class="char" style="display: inline-block; overflow: hidden; vertical-align: top;">e</span>...
等等。
然后,splt 函数似乎吞噬了自己,它吸收了上面的 HTML,这在多次迭代中成倍地减慢了页面渲染过程。
我从
useEffect
返回了一个函数,以便在页面卸载后,我手动将 HTML 重置为空字符串 ''
。这仍然会破坏页面,因为现在那里根本没有 HTML。
这是我所拥有的简化版本:
import splt from 'spltjs';
import { useEffect } from 'react';
export default function Random() {
useEffect(() => {
console.log(document.querySelector('.splt').innerHTML)
if (document.querySelector('.splt').innerHTML.length > 1) {
console.log('splitting the text')
splt({
target: '.splt'
});
} else {
console.log('no html found')
}
return () => {
document.querySelector('.splt').innerHTML = '';
}
}, [])
return (
<div className='splt'>Hello world</div>
)
}