如何使用ReactJ在定期时间内渲染数据

Question

我想说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>
    );
  }
});

Answer 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);
    }
}