我有一个React
组件称为Hero
。我正在使用anime.js
库为我的标题添加一些效果。
我的动画存储在一个名为animations.js
的文件中,它看起来像这样:
import anime from 'animejs/lib/anime.es.js';
export function letterStagger(){
console.log("test");
var textWrapper = document.querySelector('.hero__title .hero__title-letters');
console.log(textWrapper); // returns null
textWrapper.innerHTML = textWrapper.textContent.replace(/S/g, "<span class='hero__title-letter'>$&</span>");
anime.timeline({loop: true})
.add({
targets: '.hero__title .hero__title-letter',
translateY: ["1.1em", 0],
translateZ: 0,
duration: 750,
delay: (el, i) => 50 * i
}).add({
targets: '.hero__title',
opacity: 0,
duration: 1000,
easing: "easeOutExpo",
delay: 1000
});
}
现在,我正试图在我的Hero
组件中运行此函数,如下所示:
import React from 'react';
import { letterStagger } from "../../utils/animations";
class Hero extends React.Component{
render(){
return (
<section className="hero">
<h1 className="hero__title">
<span className="hero__title-inner">
<span className="hero__title-letters">This is the title</span>
</span>
</h1>
</section>
)
letterStagger();
}
}
export default Hero;
我没有编译错误,但是我有一个警告说Unreachable code
在letterStagger()
上。
如果我在render()
之后有letterStagger()
,我会得到与textContent
相关的错误。当我运行console.log(textWrapper);
时,它返回null,这使我认为该函数在找到文本之前运行(这就是为什么我尝试在render()
的末尾添加letterStagger()
。
你不应该在React中直接操作DOM,这会导致意想不到的行为。使用refs代替https://reactjs.org/docs/refs-and-the-dom.html
只有当组件被挂载时,你才能接近组件的子组件。这意味着,您应该使用组件生命周期中的方法。在你的例子中,它是componentDidMount
class Hero extends React.Component {
componentDidMount() {
letterStagger();
}
render() {
return (
<section className="hero">
<h1 className="hero__title">
<span className="hero__title-inner">
<span className="hero__title-letters">This is the title</span>
</span>
</h1>
</section>
);
}
}