使用ReactJS更好的方法吗？

Question

嗯..我是ReactJS的新人，我是AngularJS开发人员。

我遇到了问题...我需要点击链接并使用youtube iframe视频进行渲染。

我做了，但是......

代码下方：

<div class="news-box -hero">
  <a href="#" class="news-cover -play -video">
    <img src="images/news4.jpg" alt="" class="cover">

    <div class="video-box" video-id="uoNPBcEBmFg"></div>
  </a>

  <a href="#" class="news-info" style="border-color: #174489">
    <h3>Title</h3>
    <p>Date and Hours</p>
  </a>
</div>

点击＆＃39; .-视频＆＃39;在YouTube中显示youtube iframe＆＃39; .video-box＆＃39;。

会有很多＆＃39; .-视频＆＃39;。

我这样做了：

/**
 * Video
 */
var VideoBox = React.createClass({
  render: function () {
    return (
      <iframe width="70%" height="100%" src={'https://www.youtube.com/embed/' + this.props.videoId + '?rel=0&autoplay=1'} frameBorder="0" allowFullScreen></iframe>
    );
  }
});

/**
 * When click on '-video'
 */
var videos = document.querySelectorAll('.-video');

for (var i = 0, t = videos.length; i < t; i++) {
  var video = videos[i];

  video.addEventListener('click', function(e) {
    e.preventDefault();

    var videoBox = video.querySelector('.video-box'),
        id = videoBox.getAttribute('video-id');

    React.render(
      <VideoBox videoId={id} />,
      videoBox
    );

    videoBox.style.display = 'block';
  });
}

是的，它有效！还有更好的方法吗？

谢谢！