Tengo el componente React llamado Hero . Estoy usando la anime.js para agregar algunos efectos a mi título.
Mis animaciones se almacenan en un archivo llamado animations.js que se ve así:
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 }); } Ahora, estoy tratando de ejecutar esta función en mi componente Hero , así:
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; No tengo errores de compilación, pero tengo una advertencia que dice Unreachable code en letterStagger() .
Si tengo letterStagger() después de render() , obtengo errores en relación con textContent . Cuando ejecuto console.log(textWrapper); , devuelve nulo, lo que me hace pensar que la función se está ejecutando antes de que se encuentre el texto (por eso intenté agregar letterStagger() al final de render() .
No debe manipular DOM directamente en React, puede provocar un comportamiento inesperado. Use referencias en su lugar https://reactjs.org/docs/refs-and-the-dom.html
Puede acercarse a los elementos secundarios de un Componente solo cuando el componente se haya montado. Significa que debe usar un método del ciclo de vida del Componente. En su caso es componentDidMount
Así que el código de trabajo será el siguiente:
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> ); } }