Javascript 使用YouTubes JS API和Reactjs渲染iFrame视频

我试着四处寻找例子，但我所拥有的只是

youtube react

npm

软件包，我不想要这些软件包，因为我想自己动手学习

我的问题在这里的文档上： 它告诉我为Google提供一个锚定标记，以便根据您传递的内容附加iFrame

但是，我已经在服务器端使用react，并使用web pack将其编译到客户端。到目前为止，我的react组件如下所示：

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>
    )
  }
})

从“React”导入React；
从“反应路由器”导入{Link}
从“classnames”导入类名
const videoId='XxVg_s8xAms'；
导出默认的React.createClass({
getInitialState:函数（）{
返回{
YTid:videoId，
}
},
render（）{
返回(
)
}
})

我尝试将开发人员文档中的代码添加到客户机上的

脚本
标记中，但在控制台中什么都没有发生

是否有任何资源或任何人可以告诉我如何处理这件事的正确方向

谢谢
 您可能会创建一个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
}

从'react'导入{Component，PropTypes}
让我们来看看
导出默认类扩展组件{
组件安装（）{
如果（！loadYT）{
loadYT=新承诺（（解决）=>{
const tag=document.createElement（'script'）
tag.src=https://www.youtube.com/iframe_api'
const firstScriptTag=document.getElementsByTagName（'script'）[0]
firstScriptTag.parentNode.insertBefore（标记，firstScriptTag）
window.onOutubeiFrameApiryReady=（）=>解析（window.YT）
})
}
loadYT.then（（YT）=>{
this.player=新的YT.player（this.youtubePlayerAnchor{
高度：this.props.height | | 390，
宽度：this.props.width | | 640，
videoId:this.props.YTid，
活动：{
onStateChange:this.onPlayerStateChange
}
})
})
}
onPlayerStateChange=（e）=>{
if（typeof this.props.onStateChange==='function'）{
this.props.onStateChange（e）
}
}
渲染（）{
返回(
{this.youtubePlayerAnchor=r}}>
)
}
}
YouTube.propTypes={
YTid:PropTypes.string.required，
宽度：PropTypes.number，
高度：PropTypes.number，
onStateChange:PropTypes.func
}
您可能会创建如下反应组件：

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
}

从'react'导入{Component，PropTypes}
让我们来看看
导出默认类扩展组件{
组件安装（）{
如果（！loadYT）{
loadYT=新承诺（（解决）=>{
const tag=document.createElement（'script'）
tag.src=https://www.youtube.com/iframe_api'
const firstScriptTag=document.getElementsByTagName（'script'）[0]
firstScriptTag.parentNode.insertBefore（标记，firstScriptTag）
window.onYouTubeIframeAPIReady=（）=>resolve（window.YT）
})
}
loadYT.then（（YT）=>{
this.player=新的YT.player（this.youtubePlayerAnchor{
高度：this.props.height | | 390，
宽度：this.props.width | | 640，
videoId:this.props.YTid，
活动：{
onStateChange:this.onPlayerStateChange
}
})
})
}
onPlayerStateChange=（e）=>{
if（typeof this.props.onStateChange==='function'）{
this.props.onStateChange（e）
}
}
渲染（）{
返回(
{this.youtubePlayerAnchor=r}}>
)
}
}
YouTube.propTypes={
YTid:PropTypes.string.required，
宽度：PropTypes.number，
高度：PropTypes.number，
onStateChange:PropTypes.func
}
如何加载youtube iframe api？@Davidlrnt我无法加载youtube iframe api。由于文档说我需要向DOM写入脚本标记并向其发送API响应，但尝试时React会抱怨。您可以在React应用程序呈现的index.html上添加脚本标记，而不涉及React，它会全局加载库，以便React稍后能够访问这些方法。唯一的问题是它异步加载库，因此根据应用程序的设置方式，在react尝试访问iframe api时，iframe api可能尚未加载，另一个选项是使用npm包youtube player加载库，如何加载youtube iframe api？@Davidlrnt我无法加载youtube iframe api。由于文档说我需要向DOM写入脚本标记并向其发送API响应，但尝试时React会抱怨。您可以在React应用程序呈现的index.html上添加脚本标记，而不涉及React，它会全局加载库，以便React稍后能够访问这些方法。唯一的问题是，它异步加载库，因此根据应用程序的设置方式，在react尝试访问iframe api时，iframe api可能尚未加载，另一个选项是使用npm包youtube player加载库，干杯！将其用作Vue组件的基础；）干杯将其用作Vue组件的基础；）