i started working in react , issue haven't seen solution far. problem want set video playing in tag location when user clicks button.
the current solution have follows:
componentdidupdate(prevprops, prevstate) { console.log("updating timestamp: " + this.props.timestamp); var timestamp = this.props.timestamp; if (timestamp != prevprops.timestamp) { react.finddomnode(this.refs.thevideo).currenttime = timestamp; } } problem is, seems hacky. i'm in situation user click same button twice , nothing happen, i'm looking @ adding more state component ensure case works correctly.
is correct approach? in react far seems super logical, doesn't quite feel right. situation you'd expose method on child parent?
you touched on 1 solution in question—you expose method on child sets timestamp. however, imperative api, , might not fit app otherwise declarative.
in recent project, implemented declarative api using componentwillreceiveprops, similar own solution:
componentwillreceiveprops: function(props) { if (this.props.playing !== props.playing) { this.audio[props.playing ? "play" : "pause"](); } if (this.props.lastseek !== props.lastseek) { var start = props.start, offset = props.currenttime - start; this.audio.currenttime = offset / 1000; } } by comparing property given component last time rendered property given time, can determine audio clip time needs adjusted.
i think best solution involves creating special <video> component sole job of hiding such imperative api behind declarative api; then, application doesn't need know imperative api. so, in app, might use
render() { // ... <video url={...} timestamp={this.props.timestamp} /> } you can learn more concept in meetup talk: "bridging imperative apis kinetophone" (around 7:04).
