如何使用reactjs定期渲染数据答案

【问题标题】：how to render a data in periodic time using reactjs如何使用reactjs定期渲染数据
【发布时间】：2017-09-04 06:44:51
【问题描述】：

我想将数据切换 4 分钟。我有 2 个值需要翻转。我已经实现了翻转，但我需要它继续翻转它，直到我再次调用加载值，谁能告诉我如何实现它？

 var Comment = React.createClass({


    render: function () {
        var flippedCSS = "true" ? " Card-Back-Flip" : " Card-Front-Flip";
           return (

          <div className="Card" >
              <div className= {"Card-Front"+flippedCSS} style={{backgroundColor: "Blue"}} >
                   <h3>{this.props.author}</h3>
                  </div>
               <div className={"Card-Back"+flippedCSS}  style={{backgroundColor: this.props.col}} >
                   <h3>{this.props.det}</h3>
               </div>

              </div>  



      );
    }
});



  var CommentList = React.createClass({


  render: function() {
      var commentNodes = this.props.data.map(
         function (comment) {
      return (
        <Comment author={comment.IssueTxt}  col = {comment.IssueValue} det ={comment.IssueTxtDet}   >

        </Comment>
      );
         });
    return (
      <div  style={{backgroundColor:"DarkBlue" }} >
          {commentNodes}
      </div>
    );
  }
});

【问题讨论】：

使用 setTimeout 并测量从现在到之前的时间
@johnjerrico 你能帮我做 sn-p 吗？
我相信@riyajkhan 的回答可以解决你的问题，请看唯一的区别是它是用 es6 编写的

标签： reactjs reactjs.net

【解决方案1】：

根据您的要求，组件Comment不能是哑巴。

您可以在componentDidMount 中使用setInterval。

将flippedCSS 设为component state。

class Comment extends Component{

    constructor (){
        this.state = {
            flippedCSS : true
        }
    }

    render () {
        var flippedCSS = this.state.flippedCSS;

           return (    
                 <div className="Card">
                  ....    
                 </div>
              );
       }


    componentDidMount(){

        var interval = setInterval(()=>{

            this.setState({flippedCSS : !flippedCSS})

        }, 500);

    }

}

【讨论】：