javascript - 如何在 React 中使用 setInterval？

Question

我希望以下应用程序每秒在屏幕上打印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。
如何获得理想的效果？

Answer 1

您可以在您的状态中存储一个count，并使用一个间隔每秒递增此count 并创建count 多个在渲染方法中跳舞。

示例

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>