Loading an external script tag in a response component

I am creating a stock picker. I found this chart template, which is really wonderful, it comes with an html script:

<!-- TradingView Widget BEGIN -->
<div id="tv-medium-widget-b3840"></div>
<script type="text/javascript" src="https://d33t3vvu2t2yu5.cloudfront.net/tv.js"></script>
<script type="text/javascript">
new TradingView.Widget({
"container_id": "tv-medium-widget-b3840",
"symbols": [
[
  "Apple",
  "AAPL "
],
[
  "Google",
  "GOOGL"
],
[
  "Yahoo!",
  "YHOO"
]
],

"gridLineColor": "#e9e9ea",

"fontColor": "#83888D",

"underLineColor": "#dbeffb",

"trendLineColor": "#4bafe9",

"width": 1000,

"height": 350,

"tradeItWidget": false,

"locale": "en"

});
 </script>
<!-- TradingView Widget END -->

My question is, how can I put it inside the react component on the route of the react router? I just left the script tags in html and tried to call the constructor inside the component, but it appears on all pages as a canvas, not the one pointed to by the router.

const TradingViews = React.createClass({

componentDidMount:
   new TradingView.widget({

   "width": 980,
   "height": 610,
   "symbol": "QUANDL:YAHOO/FUND_FUSEX",
   "interval": "M",
   "timezone": "Etc/UTC",
   "theme": "White",
   "style": "1",
   "locale": "en",
   "toolbar_bg": "#f1f3f6",
   "enable_publishing": false,
   "allow_symbol_change": true,
   "hideideas": true,
   "show_popup_button": true,
   "popup_width": "1000",
   "popup_height": "650"


   }),

render:function(){
    return(
        null
    )

   }

});

export default TradingViews;
+4
source share

Source: https://habr.com/ru/post/1655751/


All Articles