График TradingVew в React, код не работает - PullRequest
Новая
       31

График TradingVew в React, код не работает

0 голосов
/ 02 мая 2020

Я пытаюсь изменить этот код для реакции, но не работает, ReferenceError: TradingView не определено

В vanilla html, работает, но код реакции не работает Как я могу это сделать? 

<div class="tradingview-widget-container">
      <div id="tradingview_7bf97"></div>

      <script
        type="text/javascript"
        src="https://s3.tradingview.com/tv.js"
      ></script>
      <script type="text/javascript">
        new TradingView.widget({
          autosize: true,
          symbol: "NASDAQ:AAPL",
          interval: "D",
          timezone: "Etc/UTC",
          theme: "light",
          style: "1",
          locale: "kr",
          toolbar_bg: "#f1f3f6",
          enable_publishing: false,
          allow_symbol_change: true,
          container_id: "tradingview_7bf97"
        });
      </script>
    </div>

реагирует код, который я использую ref, и скрипт asyn c, я думаю, asyn c может сначала загрузить код javascript, в новом коде Trading View браузер может найти TradingView.widget, но не может найти 

import React, { Component } from 'react';
import styles from './TradeChart.scss';
import className from 'classnames/bind';

const cx = className.bind(styles);

class TradeChart extends Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }

  componentDidMount() {
    const scriptSrc = document.createElement('script');
    const script = document.createElement('script');
    scriptSrc.src = 'https://s3.tradingview.com/tv.js';
    scriptSrc.async = true;

    script.innerHTML = `new TradingView.widget(
      {
      "autosize": true,
      "symbol": "NASDAQ:AAPL",
      "interval": "D",
      "timezone": "Etc/UTC",
      "theme": "light",
      "style": "1",
      "locale": "kr",
      "toolbar_bg": "#f1f3f6",
      "enable_publishing": false,
      "allow_symbol_change": true,
      "container_id": "tradingview_7bf97"
    }
      );`;
    this.myRef.current.appendChild(scriptSrc);
    this.myRef.current.appendChild(script);
  }
  render() {
    return (
      <div className="tradingview-widget-container" ref={this.myRef}>
        <div id="tradingview_7bf97"></div>
      </div>
    );
  }
}

export default TradeChart;
...