How do I view instances of a specific class?
I currently have a "datetime" component displaying a time view and wanting to change its display relative to the current time
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>;
}
});
(note that this is a simplified example, the actual code changes the formatting depending on the diff)
I'd like to periodically update the component's value for each instance of that component, but it seems like React doesn't provide a way to do this.
So far I have come up with this, but it seems far from ideal:
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 = [];
Then go through MDate.items
and call forceUpdate () for each
Is there a way to list each mounted MDate instance without relying on this trick?
source to share
Make a service that knows when components should update the publication of an event that all component instances are listening on componentDidMount
. And inside that event listener you are calling setState
to activate your components for rendering.
Something like that:
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>;
}
});
source to share
You really shouldn't be calling on forceUpdate
or setState
outside the component. This is one way to do it:
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() });
}
}
source to share
Thanks, I came up with this solution (cheating using 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);
source to share