TradingviewjsをReactTypescriptレンダリング関数に挿入する方法は？

debugcn 投稿 Dev

ザミールアンサリ

TypescriptReactコンポーネントにいくつかのウィジェットを追加したかったのです。これが埋め込みコードです

export default class App extends React.Component {

  render(): ReactNode {
    return (
      <div>
        Chart test
        <div className="tradingview-widget-container">
          <div className="tradingview-widget-container__widget"></div>

          <script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-ticker-tape.js" async>
            {JSON.stringify({
              "symbols": [
                {
                  "proName": "OANDA:SPX500USD",
                  "title": "S&P 500"
                },
                {
                  "proName": "OANDA:NAS100USD",
                  "title": "Nasdaq 100"
                },
                {
                  "proName": "FX_IDC:EURUSD",
                  "title": "EUR/USD"
                },
                {
                  "proName": "BITSTAMP:BTCUSD",
                  "title": "BTC/USD"
                },
                {
                  "proName": "BITSTAMP:ETHUSD",
                  "title": "ETH/USD"
                }
              ],
              "colorTheme": "light",
              "isTransparent": false,
              "displayMode": "adaptive",
              "locale": "in"
            })}
          </script>
        </div>
      </div>
    );
  }
}

同じことがブラウザのDOMでもレンダリングされているようです。残念ながら、チャートはロードされません。

jsFiddleで完全に機能する

JSONデータもスクリプトに渡されることに注意してください。このソリューションはそれについて話していません。

私はそれを間違っているようです。それを注入する正しい方法は何ですか？

ザミールアンサリ

これは私のために働いた！

export default class App extends React.Component {
    componentDidMount(): void {

      if (document.getElementById("chart")) {
        const script = document.createElement('script');
        script.src = 'https://s3.tradingview.com/external-embedding/embed-widget-ticker-tape.js'
        script.async = true;
        script.innerHTML = JSON.stringify({
          "symbols": [{
            "proName": "OANDA:SPX500USD",
            "title": "S&P 500"
          }, {
            "proName": "OANDA:NAS100USD",
            "title": "Nasdaq 100"
          }, {
            "proName": "FX_IDC:EURUSD",
            "title": "EUR/USD"
          }, {
            "proName": "BITSTAMP:BTCUSD",
            "title": "BTC/USD"
          }, {
            "proName": "BITSTAMP:ETHUSD",
            "title": "ETH/USD"
          }],
          "colorTheme": "light",
          "isTransparent": false,
          "displayMode": "adaptive",
          "locale": "in"
        });

        document.getElementById("chart")!.appendChild(script);;
      }

    }


    render(): ReactNode {
      return (<div id="chart"> </div>);
      }
    }

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]