Когда console.logging объект window внутри компонента, он выдает 'undefined'.Но это доступно при использовании консоли браузера - PullRequest
0 голосов
/ 12 декабря 2018

Я хочу получить текущее время из добавленного видео с помощью API YouTube (https://developers.google.com/youtube/iframe_api_reference).). И я хочу использовать эту информацию в другом компоненте, поэтому я даю свойство объекту окна так,Я могу получить доступ к информации в любом месте.

Код:

  import React from 'react';

    class VideoSingle extends React.Component {
      constructor(props){
        super(props);
        this.state = {}
      }

      componentDidMount() {
       // 2. This code loads the IFrame Player API code asynchronously.
       var tag = document.createElement('script');

       tag.src = "https://www.youtube.com/iframe_api";
       var firstScriptTag = document.getElementsByTagName('script')[0];
       firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

       // 3. This function creates an <iframe> (and YouTube player)
       //    after the API code downloads.

       var YT;
       window.onYouTubeIframeAPIReady = function() {
         YT = window.YT;
         window.player = new YT.Player('videoplayer', {
           height: '390',
           width: '640',
           videoId: 'M7lc1UVf-VE',
           origin:'http://localhost:3001',
           events: {

           }

         });

       }

      }

      componentDidUpdate() {

        console.log(window.player,'logging window.player at componentDidUpdate')
      }
      render(){

        console.log(window.player,'logging window.player at render')


      return (
       //1. The <iframe> (and video player) will replace this <div> tag. 
        <div id="videoplayer"></div>

        );
      }
    };



export default VideoSingle;

Все места, которые я пытаюсь использовать console.log, дают значение «undefined» (в примере, который я console.logged в componentDidMount иrender):

enter image description here

Но когда я ввожу window.player.getCurrentTime () в консоли браузера, я на самом деле получаю значение

enter image description here

Я хочу понять, как можно получить доступ к window.player.getCurrentTime () в любом месте моего приложения.

Репозиторий приложения: https://github.com/phelpa/YouList

1 Ответ

0 голосов
/ 12 декабря 2018

YouTube Script, скорее всего, создает проигрыватель после входа в систему ... Попробуйте отобразить весь вид, а затем консольный журнал.В вашем коде ... Следующие строки не имеют смысла.Проверьте ссылку YT API

YT = window.YT;

, что делает YT неопределенным ... Может быть, вы хотели сказать window.YT = YT?Пожалуйста, проверьте дважды.Удачи и держите нас в курсе.

...