如何将 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 数据也会传递给脚本。不说了

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

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

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

How to inject Tradingview js into React Typescript render function?

html

javascript

typescript

reactjs

tradingview-api