javascript – 如何在反应中使用setInterval？

2019-07-31 04:38:04 阅读：188 来源： 互联网

我希望以下应用程序在屏幕上每秒打印一次DAnce.

import React from 'react';
import ReactDOM from 'react-dom';

export class Sample extends React.Component {
    sample(text, i) {
        return <h1> DAnce</h1>;
    }

    render(){
        return (
            <div className="text-intro" id="site-type">  
                {setInterval(()=>this.sample('igod',1),1000)}
            </div>
        );
    }
}

ReactDOM.render(
  <Sample />,
  document.getElementById('root')
);

相反,我在屏幕上打印了5张.
我如何获得所需的效果？

解决方法:

您可以在您的州中存储计数,并使用间隔每秒递增此计数,并在渲染方法中创建许多舞蹈计数.

例

class Sample extends React.Component {
  state = { count: 0 };

  componentDidMount() {
    this.interval = setInterval(() => {
      this.setState(previousState => {
        return { count: previousState.count + 1 };
      });
    }, 1000);
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }

  render() {
    return (
      <div className="text-intro" id="site-type">
        {Array.from({ length: this.state.count }, () => <div>Dance</div>)}
      </div>
    );
  }
}

ReactDOM.render(<Sample />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

标签：javascript,reactjs,setinterval
来源： https://codeday.me/bug/20190731/1586932.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript – 如何在反应中使用setInterval？