Render iFrame видео с использованием YouTubes JS API с Reactjs

Question

Я пробовал искать примеры, но все, что у меня есть, это youtube-reactnpm пакеты, которые мне не нужны, так как я хочу это сделать и узнать сам.

Мой вопрос на документы здесь: https://developers.google.com/youtube/iframe_api_reference Это говорит мне, чтобы обеспечить якорь тег для Google для добавления Iframe в зависимости от того, что вы передаете его.

Однако, у меня есть реагировать на стороне сервера и использовать веб-пакет для компиляции его на клиентской стороне моей реакции компонентов до сих пор выглядит следующим образом:

import React from 'react'; 
import { Link } from 'react-router' 
import classnames from 'classnames' 

const videoId = 'XxVg_s8xAms'; 

export default React.createClass({ 
    getInitialState: function() { 
    return { 
     YTid: videoId, 
    } 
    }, 
    render() { 
    return (
     <section className="youtubeComponent-wrapper"> 
     <div id="youtubePlayerAnchor"></div> 
     </section> 
    ) 
    } 
}) 

Я попытался добавить код из разработчик документирует тег script на клиенте, но ничего ничего не происходит в консоли.

Есть ли какие-либо ресурсы или кто-нибудь может указать мне в правильном направлении, как я буду обращаться с этим.

Спасибо!

Answer 1

Вы могли бы создать Реагировать компонент, как это:

import { Component, PropTypes } from 'react' 

let loadYT 

export default class YouTube extends Component { 
    componentDidMount() { 
    if (!loadYT) { 
     loadYT = new Promise((resolve) => { 
     const tag = document.createElement('script') 
     tag.src = 'https://www.youtube.com/iframe_api' 
     const firstScriptTag = document.getElementsByTagName('script')[0] 
     firstScriptTag.parentNode.insertBefore(tag, firstScriptTag) 
     window.onYouTubeIframeAPIReady =() => resolve(window.YT) 
     }) 
    } 
    loadYT.then((YT) => { 
     this.player = new YT.Player(this.youtubePlayerAnchor, { 
     height: this.props.height || 390, 
     width: this.props.width || 640, 
     videoId: this.props.YTid, 
     events: { 
      onStateChange: this.onPlayerStateChange 
     } 
     }) 
    }) 
    } 

    onPlayerStateChange = (e) => { 
    if (typeof this.props.onStateChange === 'function') { 
     this.props.onStateChange(e) 
    } 
    } 

    render() { 
    return (
     <section className='youtubeComponent-wrapper'> 
     <div ref={(r) => { this.youtubePlayerAnchor = r }}></div> 
     </section> 
    ) 
    } 
} 

YouTube.propTypes = { 
    YTid: PropTypes.string.required, 
    width: PropTypes.number, 
    height: PropTypes.number, 
    onStateChange: PropTypes.func 
}