reactJSX内で外部スクリプトをロードする際に問題が発生しました
<script>
(function(d) {
var config = {
kitId: 1234567,
scriptTimeout: 3000,
async: true
},
h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading\b/g,"")+" wf-inactive";},config.scriptTimeout),tk=d.createElement("script"),f=false,s=d.getElementsByTagName("script")[0],a;h.className+=" wf-loading";tk.src='https://use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f||a&&a!="complete"&&a!="loaded")return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s)
})(document);
</script>
これが私のrender関数で、javasciptにasynをロードさせたいのですが、htmlファイルでは非常に簡単ですが、reactコンポーネント内で達成方法に驚いています。(別の外部モジュールのインストールを回避できる場合は、最善です)。どうもありがとう
render() {
return (
<head>
//Script to load asyn
</head>
)
}
危険なSetInnerHTMLは私が見つけた解決策です。
https://facebook.github.io/react/tips/dangerously-set-inner-html.html
これにより、スクリプトタグを作成し、jSXの横にJavaScriptを挿入できます。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加