반응 구성 요소에 javascript 태그로드

반응 구성 요소 안에 Trading View Widget을로드하려고합니다. 그러나 _dangerouslySetInnerHTML을 사용하여 시도했지만 자바 스크립트 코드가 실행되지 않습니다.반응 구성 요소에 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>에 그 스크립트 요소를 추가 생성 할 수 있습니다 :

나는이 시도

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); 

}

확실하여 _dangerouslySetInnerHTML 코드가 무엇인지,하지만 유사한 목표를 달성하기 위해 render()에서 사용했습니다.

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> 
}

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

는 이론적으로 같은 것을 할 수 있어야한다 : 일반적으로 <script> 요소에 JS를 dangerouslySetInnerHTML 것

출처

2016-12-01 01:39:33

반응 구성 요소에 javascript 태그로드

답변

관련 문제