反応成分にjavascriptタグをロードする

反応成分の中にTrading View Widgetをロードしようとしています。私は_dangerouslySetInnerHTMLを使用してみましたが、javascriptコードは実行されません。反応成分にjavascriptタグをロードする

私もこれを試してみました：

import React from 'react'; 

export default class TradingView extends React.Component{ 

    constructor(props){ 
    super(props); 
    } 

    componentDidMount() { 
    const tradingViewCode = '<!-- TradingView Widget BEGIN --><script type="text/javascript" src="https://d33t3vvu2t2yu5.cloudfront.net/tv.js"></script><script type="text/javascript">new TradingView.widget({"autosize": true,"symbol": "BITFINEX:BTCUSD","interval": "D","timezone": "America/New_York","theme": "White","style": "1","locale": "en","toolbar_bg": "#f1f3f6","enable_publishing": false,"hide_top_toolbar": true,"save_image": false,"hideideas": true});</script><!-- TradingView Widget END -->'; 
    new Function(tradingViewCode)(); 
    } 

    render(){ 
    return (
     <noscript /> 
    ); 
    } 
}

出典

2016-11-30 areyoufried

一つの方法は、&はこのようcomponentDidMountであなたの<head>にそれらのスクリプト要素を追加作成することができます：あなたの_dangerouslySetInnerHTMLコードが何であったか

componentDidMount() { 
    var headElem = document.getElementsByTagName('head')[0]; 

    var tradingWidgetSource = document.createElement('script'); 
    tradingWidgetSource.type = "text/javascript"; 
    tradingWidgetSource.src = "https://d33t3vvu2t2yu5.cloudfront.net/tv.js"; 
    headElem.appendChild(tradingWidgetSource); 

    var tradingWidgetInitCode = document.createElement('script'); 
    tradingWidgetInitCode.type = "text/javascript"; 
    tradingWidgetInitCode.innerHTML = 'new TradingView.widget({"autosize": true,"symbol": "BITFINEX:BTCUSD","interval": "D","timezone": "America/New_York","theme": "White","style": "1","locale": "en","toolbar_bg": "#f1f3f6","enable_publishing": false,"hide_top_toolbar": true,"save_image": false,"hideideas": true});'; 
    headElem.appendChild(tradingWidgetInitCode); 

}

わからないが、同様の目標を達成するためにrender（）でこれを使用していました。

render(){ 
    <div> 
     <script dangerouslySetInnerHTML={{ __html: MyJSCodeAsString }}></script> 
    </div> 
}

理論的には、のような何かを行うことができるはず：

render(){ 
    <div> 
     <script type="text/javascript" src="https://d33t3vvu2t2yu5.cloudfront.net/tv.js" /> 
     <script type="text/javascript" dangerouslySetInnerHTML={{ __html: 'new TradingView.widget({"autosize": true,"symbol": "BITFINEX:BTCUSD","interval": "D","timezone": "America/New_York","theme": "White","style": "1","locale": "en","toolbar_bg": "#f1f3f6","enable_publishing": false,"hide_top_toolbar": true,"save_image": false,"hideideas": true});' }}></script> 
    </div> 
}

一般 <script>要素にJSを dangerouslySetInnerHTMLう

出典

2016-12-01 01:39:33

反応成分にjavascriptタグをロードする

答えて

関連する問題