相关疑难解决方法(0)

我是ReactJS(0.13.1)的新手,我在我的应用程序中创建了一个组件来显示HTML5视频.

它似乎工作得很完美,但仅限于第一次选择.当您从一个视频切换到另一个视频时(this.props.video更改时),实际显示并在页面中播放的视频不会更改.

我可以<source src='blah.mp4' />在Chrome检查器中看到元素更新,但页面中实际呈现的视频不会更改,并且如果已经存在则继续播放.在Safari和Firefox中也会发生同样的事情.所有其他元素也都适当更新.

有任何想法吗？

无论如何我的组件如下:

(function(){
  var React = require('react');

  var VideoView = React.createClass({

    render: function(){
      var video = this.props.video;
      var title = video.title === ''? video.id : video.title;

      var sourceNodes = video.media.map(function(media){
        media = 'content/'+media;
        return ( <source src={media} /> )
      });
      var downloadNodes = video.media.map(function(media){
        var ext = media.split('.').slice(-1)[0].toUpperCase();
        media = 'content/'+media;
        return (<li><a className="greybutton" href={media}>{ext}</a></li>)
      });

      return (

        <div className="video-container">
          <video title={title} controls width="100%">
            {sourceNodes}
          </video>
          <h3 className="video-title">{title}</h3>
          <p>{video.description}</p>
            <div className="linkbox"> …