如何通过标准javascript元素创建React功能组件

Question

，感谢您的阅读。我从未听说过“连接但分开” Javascript和JSX的桥梁。如底部所示，我如何将javascript html组件转换为react组件。

<div class="tradingview-widget-container">
    <div id="tradingview_ae2c6"></div>
    <div class="tradingview-widget-copyright"><a href="https://www.tradingview.com/symbols/NASDAQ-AAPL/" rel="noopener" target="_blank"><span class="blue-text">AAPL Chart</span></a> by TradingView</div>
    <script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
    <script type="text/javascript">
        new TradingView.widget(
  {
            "width": 980,
        "height": 610,
        "symbol": "NASDAQ:AAPL",
        "interval": "D",
        "timezone": "Etc/UTC",
        "theme": "Light",
        "style": "1",
        "locale": "en",
        "toolbar_bg": "#f1f3f6",
        "enable_publishing": false,
        "allow_symbol_change": true,
        "container_id": "tradingview_ae2c6"
      }
        );
  </script>
</div>

将其转换为此

import React from 'react'
import * as TradingView from 'https://s3.tradingview.com/tv.js'

export default function Api() {
    const options = {
        "width": 980,
        "height": 610,
        "symbol": "NASDAQ:AAPL",
        "interval": "D",
        "timezone": "Etc/UTC",
        "theme": "Light",
        "style": "1",
        "locale": "en",
        "toolbar_bg": "#f1f3f6",
        "enable_publishing": false,
        "allow_symbol_change": true,
        "container_id": "tradingview_ae2c6"
    }
    const chart = new TradingView.widget({ options })
    return (
        <div class="tradingview-widget-container">
            {chart}
        </div>
    )
}