Question

我正在homepage的顶部标题处显示旁边文本“市场数据”的时间。 Tick由以下tick函数定义。 interval设置为一秒。

文本“市场数据”显示正常，但时间不存在。

var HomePage = React.createClass({
    getInitialState: function() { 
        setInterval(this.tick, 1000);
},
tick : function() {
        const element = ( 
        <div> 
            <h1>{new Date().toLocaleTimeString()}.</h1>
        </div>
},
render: function () {

        return (
            <div>                     
                <div className="row"> 
                    <center>{this.tick}</center>             
                    <center><p  style={{ color:'blue', fontSize:'25px', fontWeight:'bold'}}>Market Data</p></center>                     
                    <StockTable stocks={this.state.stocks} last={this.state.last} />                        
                </div>
            </div>       
        );        
    }
});

React.render(<HomePage />, document.getElementById('main'));

Answer 1

我有类似的代码在运行。您需要触发组件更新每个滴答，您可以通过在定时器后设置新状态来执行此操作。设置状态会触发组件更新，但在此之前，您将使用componentWillUnmount（）删除计时器。更新的组件安装完成后，componentDidMount（）将触发并设置新的计时器。它就像一个无限循环，每个动作触发下一个动作。这是我使用的代码，它使用ES6，因此您必须稍微调整一下。

constructor(props) {
    super(props);

    this.state = {
        time: 0
    };
}
componentDidMount() {
  this.timerID = setInterval(
    () => this.tick(),
    1000
  );
}

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

tick() {
    this.state = { time:new Date() }
    //The action you want to execute at every tick.
} 

render(){
    return(
        <div>The time: {this.state.time}</div>
    );
}

以下是React文档中对此的官方解释。 https://facebook.github.io/react/docs/state-and-lifecycle.html

Answer 2

这样做，你很高兴。我们的想法是，当您更改组件的状态时，React会更新组件。因此，在某个时间间隔内，您正在更改导致React呈现新时间更改的状态。

var HomePage = React.createClass({
componentWillMount: function(){
        this.state = {
            timeNow: new Date().toLocaleTimeString()
    }
},
componentDidMount: function() {
        this.timer = setInterval(this.tick.bind(this), 1000);
},
componentWillUnmount() {
  clearInterval(this.timer);
},
tick : function() {
    this.setState({
    timeNow: new Date().toLocaleTimeString()
})
},
 render: function () {

    return (
        <div>                     
            <div className="row"> 
                <center>
                        <div> 
                        <h1>{this.state.timeNow}</h1>
                        </div>
                </center>             
                <center><p  style={{ color:'blue', fontSize:'25px', fontWeight:'bold'}}>Market Data</p></center>                                        
            </div>
        </div>       
    );        
}
});

React.render(<HomePage />, document.getElementById('main'));

工作示例：https://jsfiddle.net/69z2wepo/73851/

除了另一个元素

2 个答案: