將javascript標簽加載到React組件中

Question

我正在嘗試在react組件內加載Trading View窗口小部件。 我嘗試使用_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 />
    );
  }
}

Answer 1

一種方法是像這樣在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（）中使用它來實現相似的目標； 通常會將JS dangerouslySetInnerHTML將InnerHTML設置為<script>元素：

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

將javascript標簽加載到React組件中

問題描述

1 個解決方案

解決方案1
1 已采納 2016-12-01 01:39:33

將javascript標簽加載到React組件中

問題描述

1 個解決方案

解決方案1 1 已采納 2016-12-01 01:39:33

解決方案1
1 已采納 2016-12-01 01:39:33