何度もinnerHTMLを設定して、スクリプトを何度も読み込むようにします。

Question

私は設定しているReactユニバーサルプロジェクトを持っています。どのページでも開くことができる必要があるため、アプリケーションの最高レベルにあるログインモードがあります。 FacebookLogin、GoogleLogin、およびいくつかのFontAwesomeアイコンなど、私はいくつかのものを持っている。このログインモーダル、インサイド

：

<Row> 
    <Col> 
    <FacebookLogin 
     appId='123456789' 
     autoLoad 
     callback={this.handleFacebookLogin} 
     fields='name,email,birthday' 
     textButton='Login with Facebook' 
     icon='fa-facebook-square' 
    /> 
    </Col> 
</Row> 

<Row> 
    <Col> 
    <GoogleLogin 
     callback={this.handleGoogleLogin} 
     clientId='123456789' 
    > 
     <FontAwesome name='google'/> Login with Google 
    </GoogleLogin> 
    </Col> 
</Row> 

最初のページ・ロードでは、FacebookのAPIは、GoogleのAPI、およびFontAwesomeはロードされではありません。私が最初にモーダルを開き、コンポーネントがマウントされると（おそらく）、3つのスクリプトがロードされます。さて、良い。

しかし、モーダルを閉じてもう一度開くと、スクリプトはに戻ってに読み込まれます。

var setInnerHTML = function (node, html) { 
    node.innerHTML = html; 
}; 

はここで何が起こっている：ネットワーク]タブでは、これらのスクリプトタグの「イニシエータ」はDOMに書き込まれているが反応ソースコードのこのビットがある、setInnerHTML.js:30のですか？このプロジェクトはthis boilerplateに基づいており、私はほとんど変わっていないので、このような貧しい行動がどうして起こっているのか分かりません。

Answer 1

私が理解しているところから、モーダルが開かれているときはいつでも、スクリプトをロードするコードがドミノに注入されているように見えます。あなたがしたくない場合は、スクリプトを注入する前にdomにスクリプトが存在するかどうかチェックするために、これらのコンポーネントを自分で修正する必要があります。