Ist das eine gute React-Praxis?

Question

Ich habe kürzlich angefangen, mit React herumzuspielen. Um meine Komponenten (mit CSS animation) zu animieren, habe ich diesen Code-Block setzte in meinem index.js:

// some code here 

window.onload =() => { 
    let myComponents = document.getElementsByClassName('componentThatHaveToBeAnimated') 

    for (let c of myComponents) { 
     // add dinamically the CSS class containing the animation 
    } 
} 

//some code here 

Ich tue dies, um in shure zu sein, dass alle Animationen nur beginnen, wenn die Seite richtig ist geladen. Meine Frage ist: ist das korrekt? Und wenn nicht, gibt es einen besseren Weg, denselben Effekt zu erzielen?

Answer 1

Reagieren ist großartig, aber wenn Sie Javascript (wie es scheint) verwendet haben, kann es ein bisschen schwierig zu verstehen und schwer zu justieren (aus Erfahrung). There is a great youtube tutorial auf React von learncodeacademy, die Ihnen wirklich hilft understand react. Sie können auch create react app für eine einfache Möglichkeit zum Einrichten eines React-Projekts betrachten.

Nun zu Ihrer Frage :) Dies ist keine gute Praxis. React hat sein eigenes "window.onload" namens componentDidMount

Auch sollten Sie getElementBy nicht benutzen, außer es ist absolut notwendig.

Das Schöne an der Reaktion ist die Verwendung von Zuständen.

Sie css Wert sollte ein Zustand sein.

Ein Beispiel dafür wäre:

import React, { Component } from 'react' 
import MyComponent from './MyComponent' 

class Animation extends Component { 
    constructor() { 
    super() //this always has to be called first in a constructor 
    this.state = { 
     animationCSS: '', 
    } 
    this.changeAnimationCSS = this.changeAnimationCSS.bind(this) 
    } 

    componentDidMount() { 
    const getAnimationCSSFromDB = db.get(animationCSS) //This obviously does not work, but an example 
    this.setState({ 
     animationCSS: getAnimationCSSFromDB 
    }) 
    } 

    changeAnimationCSS() { 
    this.setState({ 
     animationCSS: //Whatever new css you may want 
    }) 
    } 

    render() { 
    return (
     <MyComponent propertyForStylingAnimation={this.state.animationCSS} /> 
     <button onClick={this.changeAnimationCSS} label="Button" /> 
    ) 
    } 
} 
export default Animation 

MyComponent in diesem Fall etwas aussehen könnte dieses

import React from 'react' 

const MyComponent = props => 
    <div style={{ animate: props.propertyForStylingAnimation }}> // This does not work for animating since animate is not a css property. 
    // Stuff 
    </div> 
export default MyComponent 

props Verständnis, ein bisschen schwierig sein kann, aber wenn man die youtube-Tutorial folgen, indem sie Lerncodeakademie, du wirst es bekommen.

Beachten Sie, dass das zweite Bit des Codes viel kürzer ist.

Dies ist, weil es stateless ist. Was das bedeutet, ist einfach, dass es keine Staaten gibt.

Dies bedeutet, dass ich nicht die Klasse definieren muss, die Komponente erweitert, kann ich einfach eine Konstante verwenden. Ich muss auch weder render noch return definieren, da nur ein Element (das div) zurückgegeben wird, es werden keine Klammern benötigt. Darüber müssen Sie sich beim Lernen von React zunächst keine Gedanken machen, aber es ist eine gute Übung.