使用带有Reactjs的YouTubes JS API呈现iFramevideo

我试过四处寻找例子，但我所有的是youtube-react npm包，我不想要，因为我想要做，并自己学习。

我的问题是在这里的文档： https ： //developers.google.com/youtube/iframe_api_reference它告诉我提供一个锚标签为谷歌添加iFrame根据你传递它。

然而，我已经在服务器端做出反应，并使用web-pack将其编译到客户端，我的反应组件到目前为止如下所示：

 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

你可能可以像这样创build一个React组件：

 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 }