Ошибка при использовании React.createRef - «Вы должны передать либо действительный элемент, либо действительный идентификатор»

Question

У меня есть следующий код:

import Vimeo from '@vimeo/player';

class MyComponent extends React.Component {

  constructor(props) {
    super(props);
    this.videoRef= React.createRef();
  }

  componentDidMount() {
    const player = new Vimeo(this.videoRef);
  }

  render() {
   return (
    <item><iframe ref={this.videoRef} /></item>
  )
 }
}

Однако я получаю за new Vimeo(this.videoRef) и ошибку

Unhandled Rejection (TypeError): You must pass either a valid element or a valid id.

Что не так?

Answer 1

Насколько мне известно, это сделало бы работу

const player = new Vimeo(this.videoRef.current)

Здесь вы создаете ссылку, используя React.createRef. Он хранит ссылку на элемент внутри поля current.

Answer 2

если вы пытаетесь сделать что-то похожее на это;(https://jsfiddle.net/oLpz88mL/13/) Вы можете просмотреть этот пример на скрипке для базы знаний. HTML

<div id="ad-slot">
  <iframe width="100%" height="480" src="//fiddle.jshell.net/zx488o9u/9/show/light/" frameborder="0"></iframe>
</div>

JS

// Player 1
var player1 = document.getElementById('player1');
var doc = player1.ownerDocument;
var win = doc.defaultView || doc.parentWindow;

console.log(player1 instanceof win.HTMLElement);

// Player 2
var iframe = document.getElementById('ad-slot').childNodes[1];
var idocument = iframe.contentDocument || iframe.contentWindow.document;
var player2 = idocument.getElementById('player2');
var doc = player2.ownerDocument;
var win = doc.defaultView || doc.parentWindow;

console.log(player2 instanceof win.HTMLElement);