React/Meteor에서 외부 스크립트 사용

Question

Meteor의 반응 구성 요소에 외부 스크립트를 포함하려고합니다. 난 그냥 그렇게처럼 내 구성 요소의 스크립트 태그를 배치 시도했다 : 이것은 (다른 페이지 또는 새로 고침을 통해) 페이지가로드 처음이 미세하게

TheLounge = React.createClass({ 
    render() { 
    return (
     <div> 
     <div className="main"> 
      {/* Uberflip Embedded Hub (Use this to generate the frame below) */} 
      <script>var ufh_top_offset = 0, ufh_bottom_offset = 0;</script> 
      <script type="text/javascript" src="https://thelounge.tullyluxurytravel.com/hubsFront/embed_iframe?u=https%3A%2F%2Fthelounge.tullyluxurytravel.com%2Fh%2F%3Fembedded%3D1%26offsetTop%3D0%26offsetBottom%3D0%26hideHeader%3D1%26hideBanner%3D0%26hideFooter%3D1%26hidePriNav%3D0%26hideSecNav%3D0%26linkBreakOut%3D0"></script> 
      {/* /End Uberflip Embedded Hub */} 

     </div> 
     <Footer /> 
     </div> 
    ); 
    }, 
}); 

. 그러나 다른 페이지로 돌아갈 때 스크립트가 다시로드되지 않습니다.

• 다음과 같이 componentDidMount 및 componentDidUpdate에서 스크립트를 주입 :

  지금까지 나는 다음과 같은 시도했습니다에서

componentDidMount 및 componentDidUpdate :

var script = document.createElement("script"); 
script.type = "text/javascript"; 
script.src = url; 
// Tested the line below with body, head, and a div with specific id. 
document.getElementsByTagName("body")[0].appendChild(script); 

나 ' 또한 다음 패키지를 사용해 보았습니다.

(210)

• https://github.com/yariv/ReactScriptLoader
I 위의 방법의 네 오류 얻을로

그러나

https://github.com/kadirahq/meteor-dochead

$ .getScript() :

Error: Failed to execute 'write' on 'Document': It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened. 

을 내가 그 스크립트 때문입니다 실현 document.write();를 사용하여로드하려고합니다.

나는이 스크립트를 React 구성 요소에 포함시키는 방법에 관해서 새로운 아이디어를 얻었습니다.

Answer 1

나는 이것을 시험해 보지 않았지만, 불꽃에 대해 이것을 읽었다. 아마이 할 수있는 몸에

https://maxlibin.com/meteor-include-external-javascript-files/

Answer 2

태그를하는 데 도움이 또는 템플릿 유성에 의해 실행되지 않습니다, 그들은 구문 분석하고 유성의 템플릿 시스템에 의해 처리됩니다. jQuery getScript 함수를 사용해보십시오 :

componentWillMount() { 
    $.getScript('https://thelounge.tullyluxurytravel.com/hubsFront/embed_iframe?u=https%3A%2F%2Fthelounge.tullyluxurytravel.com%2Fh%2F%3Fembedded%3D1%26offsetTop%3D0%26offsetBottom%3D0%26hideHeader%3D1%26hideBanner%3D0%26hideFooter%3D1%26hidePriNav%3D0%26hideSecNav%3D0%26linkBreakOut%3D0'); 
}