无法在jsx中显示iframe

时间:2019-04-29 09:35:18

标签: javascript reactjs iframe jsx

我在我的应用程序中使用交易视图小部件,在HTML中,该小部件可以正常工作,但在JSX中,它无法正常工作。

我使用了react-iframe,但运气不好,这是我需要在react组件中显示的小部件

<!-- TradingView Widget BEGIN -->
<div class="tradingview-widget-container">
    <div class="tradingview-widget-container__widget">
        <script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-market-overview.js"
            async>
            {
                "gridLineColor": "rgba(242, 243, 245, 1)",
                "scaleFontColor": "rgba(131, 136, 141, 1)",
                "title": "Stocks",
                "tabs": [{
                        "symbols": [{
                                "s": "NYSE:JPM",
                                "d": "Jpmorgan Chase & Co"
                            },
                            {
                                "s": "NYSE:WFC",
                                "d": "Wells Fargo Co New"
                            },
                            {
                                "s": "NYSE:BAC",
                                "d": "Bank Amer Corp"
                            },
                            {
                                "s": "NYSE:HSBC",
                                "d": "Hsbc Hldgs Plc"
                            },
                            {
                                "s": "NYSE:C",
                                "d": "Citigroup Inc"
                            },
                            {
                                "s": "NYSE:MA",
                                "d": "Mastercard Incorporated"
                            }
                        ],
                        "title": "Financial"
                    },
                    {
                        "symbols": [{
                                "s": "NASDAQ:AAPL",
                                "d": "Apple"
                            },
                            {
                                "s": "NASDAQ:GOOGL",
                                "d": "Google Inc"
                            },
                            {
                                "s": "NASDAQ:MSFT",
                                "d": "Microsoft Corp"
                            },
                            {
                                "s": "NASDAQ:FB",
                                "d": "Facebook Inc"
                            },
                            {
                                "s": "NYSE:ORCL",
                                "d": "Oracle Corp"
                            },
                            {
                                "s": "NASDAQ:INTC",
                                "d": "Intel Corp"
                            }
                        ],
                        "title": "Technology"
                    },
                    {
                        "symbols": [{
                                "s": "NASDAQ:AMZN",
                                "d": "Amazon Com Inc"
                            },
                            {
                                "s": "NYSE:BABA",
                                "d": "Alibaba Group Hldg Ltd"
                            },
                            {
                                "s": "NYSE:T",
                                "d": "At&t Inc"
                            },
                            {
                                "s": "NYSE:WMT",
                                "d": "Wal-mart Stores Inc"
                            },
                            {
                                "s": "NYSE:CHL",
                                "d": "China Mobile Limited"
                            },
                            {
                                "s": "NYSE:V",
                                "d": "Visa Inc"
                            }
                        ],
                        "title": "Services"
                    }
                ],
                "plotLineColorFalling": "rgba(33, 150, 243, 1)",
                "plotLineColorGrowing": "rgba(33, 150, 243, 1)",
                "showChart": true,
                "height": 660,
                "locale": "en",
                "symbolActiveColor": "rgba(225, 239, 249, 1)",
                "belowLineFillColorFalling": "rgba(5, 122, 205, 0.12)",
                "belowLineFillColorGrowing": "rgba(5, 122, 205, 0.12)",
                "width": 400
            }
        </script>
    </div>

</div>
<!-- TradingView Widget END -->

如果我在.html文件中运行此HTML,则该小部件可以正常工作,实际上script标签会呈现一个iframe,但是在响应中,我不知道如何在jsx中显示iframe

0 个答案:

没有答案