使用React组件中另一个文件中的函数

Question

我有一个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()。

Answer 1

你不应该在React中直接操作DOM，这会导致意想不到的行为。使用refs代替https://reactjs.org/docs/refs-and-the-dom.html

Answer 2

只有当组件被挂载时，你才能接近组件的子组件。这意味着，您应该使用组件生命周期中的方法。在你的例子中，它是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>
);
}
}