将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