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

我这样做是为了避免所有动画只在页面正确加载时启动。我的问题是：这是对的吗？而且，如果不是，有更好的方法来达到同样的效果吗？

Answer 1

React很棒，但是当你使用Javascript（就像你看起来那样）时，理解它并且难以调整（从经验中）可能有点棘手。关于React的learncodeacademy有一个很棒的youtube教程，它真的可以帮助你understand react。您可能还想查看create react app以获得设置React项目的简便方法。

现在回答你的问题:)这不是一个好习惯。 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可能看起来像这样

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可能有点棘手，但是如果你按照learncodeacademy的说明关注youtube教程，你就会明白它。

请注意，第二位代码要短得多。

这是因为它是stateless。这意味着没有国家。

这意味着我不需要定义扩展组件的类，我可以使用常量。我也不需要定义渲染或返回，因为只返回一个元素（div），不需要括号。在学习React时，这不是你最初需要担心的事情，但这是一种很好的做法。

这是一个很好的React练习吗？

1 个答案: