Я пытаюсь отобразить время рядом с текстом «Рыночные данные» в верхнем заголовке homepage. Тик определяется функцией 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'));
1
Ivan 20 Мар 2017 в 02:55

2 ответа

Лучший ответ

У меня работает похожий код Вам нужно запускать компонент для обновления каждого тика, вы будете делать это, устанавливая новое состояние после таймера. Установка состояния инициирует обновление компонента, но перед этим вы удаляете таймер с помощью 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- и - lifecycle.html

2
David Neto 20 Мар 2017 в 00:31

Сделайте это, и вы готовы идти. Идея состоит в том, что 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/

1
Asish Bhattarai 20 Мар 2017 в 00:40