如何将TradingView窗口小部件插入脚本标记链接中的react js中：https://www.tradingview.com/widget/market-overview/

Question

export default class extends Component {
    render() {
        return (
            <div>
                {
                        /***
                         * enter the code here
                          */
                }
            </div>
        )
    }
}

Answer 1

export default  class Tabsshow extends React.PureComponent {
constructor(props) {
    super(props);
    this._ref = React.createRef();
}
render() {
    return(
    <div class="tradingview-widget-container" ref={this._ref}>
        <div class="tradingview-widget-container__widget"></div>

    </div>
    );
}
componentDidMount() {
    const script = document.createElement('script');
    script.src = 'https://s3.tradingview.com/external-embedding/embed-widget-market-overview.js'
    script.async = true;
    script.innerHTML = /* JSON-ENCODED SETTINGS STRING FROM EMBED CODE */
    this._ref.current.appendChild(script);
}

}

Answer 2

这应该适合您的情况

class App extends  React.Component {

    componentDidMount() {
        const script = document.createElement('script');
        script.src = 'https://s3.tradingview.com/external-embedding/embed-widget-market-overview.js'
        script.async = true;
        script.innerHTML = JSON.stringify({ /* JSON object */})
        document.getElementById("myContainer").appendChild(script);
    }

    render() {
        return(
      <div id="myContainer">
        <div className="tradingview-widget-container">
           <div className="tradingview-widget-container__widget">
            </div>
        </div>
     </div>
        );
    }
    }

Answer 3

我建议您使用React Helmet

以下是给定的演示：

import React from "react";
import {Helmet} from "react-helmet";

class Application extends React.Component {
  render () {
    return (
        <div className="application">
            <Helmet>
                <meta charSet="utf-8" />
                <title>My Title</title>
                <link rel="canonical" href="http://example.com/example" />
            </Helmet>
            ...
        </div>
    );
  }
};

您也可以在代码中添加脚本。让我知道它是否对您有帮助。

已编辑

根据您的情况，您可以执行以下操作：

import React from "react";
import {Helmet} from "react-helmet";
export default class MyPro extends Component {
    render() {
        return (
            <Helmet>
               <script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-market-overview.js" async>
               {`
                {
                    "showChart": true,
                    "locale": "en",
                    "largeChartUrl": "",
                    "width": "400",
                    "height": "600",
                    "plotLineColorGrowing": "rgba(60, 188, 152, 1)",
                    "plotLineColorFalling": "rgba(255, 74, 104, 1)",
                    "gridLineColor": "rgba(233, 233, 234, 1)",
                    "scaleFontColor": "rgba(214, 216, 224, 1)",
                    "belowLineFillColorGrowing": "rgba(60, 188, 152, 0.05)",
                    "belowLineFillColorFalling": "rgba(255, 74, 104, 0.05)",
                    "symbolActiveColor": "rgba(242, 250, 254, 1)",
                    "tabs": [
                        {
                        "title": "Indices",
                        "symbols": [
                            {
                            "s": "INDEX:SPX",
                            "d": "S&P 500"
                            },
                            {
                            "s": "INDEX:IUXX",
                            "d": "Nasdaq 100"
                            },
                            {
                            "s": "INDEX:DOWI",
                            "d": "Dow 30"
                            },
                            {
                            "s": "INDEX:NKY",
                            "d": "Nikkei 225"
                            },
                            {
                            "s": "INDEX:DAX",
                            "d": "DAX Index"
                            },
                            {
                            "s": "OANDA:UK100GBP",
                            "d": "FTSE 100"
                            }
                        ],
                        "originalTitle": "Indices"
                        },
                        {
                        "title": "Commodities",
                        "symbols": [
                            {
                            "s": "CME_MINI:ES1!",
                            "d": "E-Mini S&P"
                            },
                            {
                            "s": "CME:E61!",
                            "d": "Euro"
                            },
                            {
                            "s": "COMEX:GC1!",
                            "d": "Gold"
                            },
                            {
                            "s": "NYMEX:CL1!",
                            "d": "Crude Oil"
                            },
                            {
                            "s": "NYMEX:NG1!",
                            "d": "Natural Gas"
                            },
                            {
                            "s": "CBOT:ZC1!",
                            "d": "Corn"
                            }
                        ],
                        "originalTitle": "Commodities"
                        },
                        {
                        "title": "Bonds",
                        "symbols": [
                            {
                            "s": "CME:GE1!",
                            "d": "Eurodollar"
                            },
                            {
                            "s": "CBOT:ZB1!",
                            "d": "T-Bond"
                            },
                            {
                            "s": "CBOT:UD1!",
                            "d": "Ultra T-Bond"
                            },
                            {
                            "s": "EUREX:GG1!",
                            "d": "Euro Bund"
                            },
                            {
                            "s": "EUREX:II1!",
                            "d": "Euro BTP"
                            },
                            {
                            "s": "EUREX:HR1!",
                            "d": "Euro BOBL"
                            }
                        ],
                        "originalTitle": "Bonds"
                        },
                        {
                        "title": "Forex",
                        "symbols": [
                            {
                            "s": "FX:EURUSD"
                            },
                            {
                            "s": "FX:GBPUSD"
                            },
                            {
                            "s": "FX:USDJPY"
                            },
                            {
                            "s": "FX:USDCHF"
                            },
                            {
                            "s": "FX:AUDUSD"
                            },
                            {
                            "s": "FX:USDCAD"
                            }
                        ],
                        "originalTitle": "Forex"
                        }
                    ]
                    }
               `}
                </script> 
            </Helmet>
        )
    }
}

Answer 4

使用以下库：

https://github.com/rafaelklaessen/react-tradingview-widget

import TradingViewWidget, { Themes } from 'react-tradingview-widget';

const App = () => (
  <TradingViewWidget
    symbol="NASDAQ:AAPL"
    theme={Themes.DARK}
    locale="fr"
    autosize
  />
);