Question

我是新的反应js。我创建了一个简单的滑块组件。它正在工作，但我想询问是否有正确的方法来调用该方法？从我在构造函数上调用它的那一刻起。我真的很感激任何建设性的批评。谢谢。

import React from 'react';

export default class Slider extends React.Component {

    constructor() {
        super();

        this.state = {
            current: 4
        };

        this.current = this.state.current;

        setTimeout(() => {
            this.animate();
        }, 5000);
    }

    animate() {
        this.getCurrent();
        this.setState({
            current: this.current
        });
    }

    getCurrent() {
        this.current = (this.current >= this.props.slides.length - 1) ? 0 : this.current + 1;
        return this.current;
    }

    render() {
        var slides = this.props.slides;
        var slideList  = slides.map((slide, index) => {
            let slideClass = (index == this.state.current) ? 'slider-item active' : 'slider-item';
            return <div className={slideClass} key={index}><span>{slide}</span></div>;
        });

        return (
            <div className="slider-component">{slideList}</div>
        )
    }
}

Answer 1

在componentDidMount中这样做：

componentDidMount() {
  this.timer = setTimeout(() => {
      this.animate();
      this.timer = undefined
  }, 5000);
}

但是不要忘记在卸载时清除计时器，如下所示：

componentWillUnmount() {
  if (this.timer) {
    clearTimeout(this.timer)
  }
}

否则如果在5000ms之前卸载此组件，代码将会中断，因为它将尝试在未安装的组件中执行setState。

Answer 2

在componentDidMount（）

中调用它

Answer 3

理想情况下，构造函数应该只构造应该在页面中使用的对象，如果你想在“mount”上运行某些东西我会将它添加到ComponentDidMount()，因为如果你已经将滑块构建为每次被“激活”时，它都会运行该方法。

在反应组件中调用方法的位置？

3 个答案: