在调用构造函数之前未加载JS文件

Question

我有一个问题，我在Meteor中的组件的构造函数中有代码。 这应该做的是打开一个插座等，为连接做好准备。

当前发生的情况是刷新页面时会告诉我存在引用错误，并且未定义Peer。

但是，如果我将代码置于其自己的函数中并在单击我添加到页面的按钮时调用该函数，那么它可以正常工作。

这让我相信它与在加载文件Peer.js之前调用的构造函数有关？

Meteor有一个名为ComponentDidMount()的函数，如果我把代码放在那里，我仍然会得到与放置在构造函数中的错误相同的错误。

以下是代码：

import React from 'react';

export default class WebChat extends React.Component {

  constructor() {
    super();
  }

  componentDidMount() {
    // this shows on refresh, still get error next though
    alert("Mounted");

    // Create a Peer instance
    window.peer = new Peer({
      key: 'key',  // get a free key at http://peerjs.com/peerserver
      debug: 3,
      config: {
        'iceServers': [
          {url: 'stun:stun.l.google.com:19302'},
          {url: 'stun:stun1.l.google.com:19302'},
        ]
      }
    });

    // Handle event: upon opening our connection to the PeerJS server
    peer.on('open', function () {
      $('#myPeerId').text(peer.id);
    });

    // Handle event: remote peer receives a call
    peer.on('call', function (incomingCall) {
      window.currentCall = incomingCall;
      incomingCall.answer(window.localStream);
      incomingCall.on('stream', function (remoteStream) {
        window.remoteStream = remoteStream;
        var video = document.getElementById("theirVideo")
        video.src = URL.createObjectURL(remoteStream);
      });
    });

    navigator.getUserMedia = (navigator.getUserMedia ||
      navigator.webkitGetUserMedia ||
      navigator.mozGetUserMedia ||
      navigator.msGetUserMedia);

    // get audio/video
    navigator.getUserMedia({audio: true, video: true}, function (stream) {
        //display video
        var video = document.getElementById("myVideo");
        video.src = URL.createObjectURL(stream);
        window.localStream = stream;
      },
      function (error) {
        console.log(error);
      }
    );
  }

  connectToPeer() { // If I use this instead of the componentDidMount then it works, but requires me to click a button first
    // Create a Peer instance
    window.peer = new Peer({
      key: 'key',  // get a free key at http://peerjs.com/peerserver
      debug: 3,
      config: {
        'iceServers': [
          {url: 'stun:stun.l.google.com:19302'},
          {url: 'stun:stun1.l.google.com:19302'},
        ]
      }
    });

    // Handle event: upon opening our connection to the PeerJS server
    peer.on('open', function () {
      $('#myPeerId').text(peer.id);
    });

    // Handle event: remote peer receives a call
    peer.on('call', function (incomingCall) {
      window.currentCall = incomingCall;
      incomingCall.answer(window.localStream);
      incomingCall.on('stream', function (remoteStream) {
        window.remoteStream = remoteStream;
        var video = document.getElementById("theirVideo")
        video.src = URL.createObjectURL(remoteStream);
      });
    });

    navigator.getUserMedia = (navigator.getUserMedia ||
      navigator.webkitGetUserMedia ||
      navigator.mozGetUserMedia ||
      navigator.msGetUserMedia);

    // get audio/video
    navigator.getUserMedia({audio: true, video: true}, function (stream) {
        //display video
        var video = document.getElementById("myVideo");
        video.src = URL.createObjectURL(stream);
        window.localStream = stream;
      },
      function (error) {
        console.log(error);
      }
    );
  }

  makeCall() {
    var outgoingCall = peer.call($('#remotePeerId').val(), window.localStream);
    window.currentCall = outgoingCall;
    outgoingCall.on('stream', function (remoteStream) {
      window.remoteStream = remoteStream;
      var video = document.getElementById("theirVideo");
      video.src = URL.createObjectURL(remoteStream);
    });
  }

  endCall() {
    window.currentCall.close();
  }

  render() {
    return (
      <div>
        <h2>Video Chat</h2>
        <div id="video-container">
          Their video: <video id="theirVideo" class="theirVideo" autoplay></video>
          Your video: <video id="myVideo" muted="true" class="myVideo" autoplay></video>
        </div>
        <h2>Controls</h2>
        <div>
          <p>Your id: <span id="myPeerId">...</span></p>
          <p>Make a call</p><br/>
          <input type="text" placeholder="Call user id..." id="remotePeerId"/>
          <p><a href="#" id="makeCall" onClick={this.makeCall.bind(this)}>Call</a></p>
          <p><a href="#" id="endCall" onClick={this.endCall.bind(this)}>End call</a></p>
        </div>
        <p><a href="#" id="endCall" onClick={this.connectToPeer.bind(this)}>Connect to peer</a></p>
      </div>
    )
  }
}