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，并在render方法中创建count个Dance。

示例

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>

Answer 2

您必须考虑将文本更改为您的应用程序中正在更改的内容。那是国家的理想选择。

我不知道您的函数示例做什么。但是，假设您已声明它。

substring()

然后您可以这样：

const sample = (text, i) => { ... };

基本上发生的是，在安装组件时，您将启动一个超时，该超时将每1秒更新一次状态，从而更新您的UI。

Answer 3

尝试一下，

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">
         {setTimeout(()=>{this.sample('igod',1)}, 1000)}
         </div>
      );
   }
}
ReactDOM.render(
   <Sample />,
document.getElementById('root')
);

Answer 4

您使用过setTimeout，它将在组件渲染时被调用多次。

您需要使用setInterval才能每秒工作。

用它代替。霍普这将为您提供帮助。

{setInterval(()=>this.sample('igod',1),1000)}

Answer 5

如果您使用react lifecycle，该怎么办：

browser.switchTo().defaultContent();

如何在React中使用setInterval？

5 个答案: