如何将Tradingview js注入React Typescript渲染函数中？

Question

我想在Typescript React组件中添加一些小部件。 Here is the embed code

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上也是如此。不幸的是，该图表从未加载过：

Working perfectly in jsFiddle

请注意，JSON数据也会传递到脚本。 This solution没有谈论它。

似乎我做错了。正确的注射方法是什么？

Answer 1

这对我有用！

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