如何列出特定類的實例？

Question

我現在有一個「日期時間」組件，顯示時間表示，並希望其顯示相對改變到當前時間

var MDate = React.createClass({ 
    render: function() { 
     // this.props.date is an integer 
     var d = new Date(this.props.date); 
     var diff = ((new Date() - d)/1000) | 0; 

     return <time>{diff} seconds ago</time>; 
    } 
}); 

（注意，這是一個簡化的例子，實際的代碼改變格式取決於差異）

我想定期刷新該組件的每個實例的組件值，但似乎React沒有提供這樣做的方式。

到目前爲止，我已經想出了這一點，但是這似乎很不理想：

var MDate = React.createClass({ 
    componentWillMount: function() { 
     MDate.items.push(this); 
    }, 
    componentWillUnmount: function() { 
     var i = MDate.items.indexOf(this); 
     if (i > -1) { 
      MDate.items.splice(i, 1); 
     }   
    }, 
    render: function() { … } 
} 

MDate.items = []; 

然後在MDate.items迭代，並調用forceUpdate（）爲每一個

有沒有一種方式列出MDate的每個已安裝實例而不依賴此技巧？

Answer 1

做，知道當組件應更新發布，所有的組件實例監聽在componentDidMount事件的服務。在該事件監聽器中，您可以調用setState觸發組件重新渲染。

事情是這樣的：

let MDate = React.createClass({ 
    getInitialState() { 
    return this.getState(); 
    }, 
    getState() { 
    return { 
     date: DateStore.get() 
    }; 
    }, 
    componentDidMount() { 
    DateStore.on('change',() => this.setState(this.getState())); 
    }, 
    render() { 
    let d = new Date(this.state.date); 
    let diff = ((new Date() - d)/1000) | 0; 

    return <time>{diff} seconds ago</time>; 
    } 
}); 

Answer 2

您不應該從組件外部真正地調用forceUpdate或setState。這是做這件事：

var MDate = React.createClass({ 
    componentWillMount: function() { 
     this._timer = setInterval(this.update, 1000); 
    }, 
    componentWillUnmount: function() { 
     clearInterval(this._timer); 
    }, 
    getInitialState() { 
     return { 
      currentDate: new Date() 
     }; 
    }, 
    render: function() { 
     // this.props.date is an integer 
     var d = new Date(this.props.date); 
     var diff = ((this.state.currentDate - d)/1000) | 0; 

     return <time>{diff} seconds ago</time>; 
    }, 
    update() { 
     this.setState({ currentDate: new Date() }); 
    } 
} 

Answer 3

謝謝你，我想出了這個解決方案（使用jQuery作弊）

var MDate = React.createClass({ 
    getInitialState: function() { 
     return {tick: new Date().getTime()}; 
    }, 
    tick: function(ev) { 
     this.setState({tick: ev.timeStamp}) 
    }, 
    componentWillMount: function() { 
     $(document).on('date-tick', this.tick); 
    }, 
    componentWillUnmount: function() { 
     $(document).off('date-tick', this.tick); 
    }, 
    render: function() {…} 
} 

window.setInterval(function() { 
    $(document).trigger('date-tick') 
}, 20 * 1000);