これは良いリアクションの練習ですか？

Question

私は最近Reactで遊び始めました。 （CSS animationを使用して）私のコンポーネントをアニメーション化するために、私は私の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 

私は、ページが正常にある場合にのみ、すべてのアニメーションが始まりますSHUREするために、これを行いますロードされる。 私の質問です：これは正しいですか？そして、そうでない場合、同じ効果を達成するためのより良い方法がありますか？

Answer 1

リアクションは素晴らしいですが、Javascriptを使用している場合は、理解するのが難しく、調整するのが難しい場合があります（経験から）。あなたは本当にあなたを助けるlearncodeacademyで素晴らしいYouTubeのチュートリアルですunderstand react。また、Reactプロジェクトを簡単に設定する方法については、create react appを参照してください。

質問：これは良い習慣ではありません。 Reactは独自の "window.onload"を持っています。componentDidMount

また、絶対に必要でない限り、getElementByを使用しないでください。

反応についての美しいものは状態を使用しています。

あなたはcss値が状態である必要があります。

この例は次のようになります。

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のは、この場合には少しトリッキーなことができpropsを理解するこの

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 

のように見えるかもしれませんが、あなたは、ユーチューブのチュートリアルによるに従うならばlearncodeacademy、あなたはそれを取得します。

コードの2番目のビットがはるかに短いことに注意してください。

statelessです。これが意味するのは、単に州が存在しないということです。

これは、コンポーネントを拡張するクラスを定義する必要がないことを意味します。定数を使用することができます。レンダリングまたはリターンを定義する必要もありません。返される要素（div）が1つしかないため、角かっこは必要ありません。これは、リアクションを学ぶときに最初に心配する必要があるものではありませんが、それは良い習慣です。