Question

试图使TradingView小部件反应，但目前未显示任何内容。

在这个问题之后，我尝试了几种不同的语法：how to to insert TradingView widget into react js which is in script tag link: https://www.tradingview.com/widget/market-overview/

但到目前为止没有运气

This is the widget I want to add: 
<!-- TradingView Widget BEGIN -->
<div class="tradingview-widget-container">
  <div id="tv-medium-widget"></div>
  <div class="tradingview-widget-copyright"><a href="https://www.tradingview.com/symbols/BITMEX-XBTUSD/" rel="noopener" target="_blank"><span class="blue-text">Bitcoin</span></a> <span class="blue-text">and</span> <a href="https://www.tradingview.com/symbols/BITMEX-ETHUSD/" rel="noopener" target="_blank"><span class="blue-text">Ethereum Quotes</span></a> by TradingView</div>
  <script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
  <script type="text/javascript">
  new TradingView.MediumWidget(
  {
  "container_id": "tv-medium-widget",
  "symbols": [
    [
      "Bitcoin",
      "BITMEX:XBTUSD|1m"
    ],
    [
      "Ethereum",
      "BITMEX:ETHUSD|1m"
    ]
  ],
  "greyText": "Quotes by",
  "gridLineColor": "rgba(182, 182, 182, 0.65)",
  "fontColor": "rgba(0, 0, 0, 1)",
  "underLineColor": "rgba(60, 120, 216, 1)",
  "trendLineColor": "rgba(60, 120, 216, 1)",
  "width": "100%",
  "height": "100%",
  "locale": "en"
}
  );
  </script>
</div>
<!-- TradingView Widget END -->

这是我到目前为止所做的：

// Render a component to display the crypto-currency prices  
class MenuCard extends Component {

    componentDidMount() {
        const script = document.createElement('script');
        script.src = 'https://s3.tradingview.com/tv.js'
        script.async = false;
        script.innerHTML = JSON.stringify({
            "container_id": "tv-medium-widget",
            "symbols": [
                [
                "Bitcoin",
                "BITMEX:XBTUSD|1m"
                ],
                [
                "Ethereum",
                "BITMEX:ETHUSD|1m"
                ]
            ],
            "greyText": "Quotes by",
            "gridLineColor": "rgba(182, 182, 182, 0.65)",
            "fontColor": "rgba(0, 0, 0, 1)",
            "underLineColor": "rgba(60, 120, 216, 1)",
            "trendLineColor": "rgba(60, 120, 216, 1)",
            "width": "100%",
            "height": "100%",
            "locale": "en"
            })
        document.getElementById("myContainer").appendChild(script);
    }

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

MenuCard.defaultProps = {
    MenuCard: []
}

export default MenuCard;

当前屏幕上什么都没有显示，因此理想的情况是将小部件显示出来。

Answer 1

将脚本添加到 HTML 文件的末尾。

<body>
...
<script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
</body>

并将您的代码修改为-

 // Render a component to display the crypto-currency prices  
class MenuCard extends Component {       
componentDidMount() {
            const script = document.createElement('script');
            script.innerHTML = new window.TradingView.MediumWidget({
                "container_id": "tv-medium-widget",
                "symbols": [
                    [
                    "Bitcoin",
                    "BITMEX:XBTUSD|1m"
                    ],
                    [
                    "Ethereum",
                    "BITMEX:ETHUSD|1m"
                    ]
                ],
                "greyText": "Quotes by",
                "gridLineColor": "rgba(182, 182, 182, 0.65)",
                "fontColor": "rgba(0, 0, 0, 1)",
                "underLineColor": "rgba(60, 120, 216, 1)",
                "trendLineColor": "rgba(60, 120, 216, 1)",
                "width": "100%",
                "height": "100%",
                "locale": "en"
                })
            document.getElementById("myContainer").appendChild(script);
        }
    
        render() {
            return(
                <div className="canvas_block" id="myContainer">
                    <div className="canvas_block_img" >
                            <div className="tradingview-widget-container">
                        </div>
                    </div>
                </div>
            )
        }
    }
    
    MenuCard.defaultProps = {
        MenuCard: []
    }
    
    export default MenuCard;

Answer 2

使用https://s3.tradingview.com/external-embedding/embed-widget-market-overview.js作为脚本源。

此外，在React documentation之后，您需要创建一个ref来访问DOM节点，如下面的代码所示：

class MenuCard extends Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }

  componentDidMount() {
    const script = document.createElement('script');
    script.src = 'https://s3.tradingview.com/external-embedding/embed-widget-market-overview.js'
    script.async = false;
    script.innerHTML = JSON.stringify({
        "container_id": "tv-medium-widget",
        "symbols": [
            [
            "Bitcoin",
            "BITMEX:XBTUSD|1m"
            ],
            [
            "Ethereum",
            "BITMEX:ETHUSD|1m"
            ]
        ],
        "greyText": "Quotes by",
        "gridLineColor": "rgba(182, 182, 182, 0.65)",
        "fontColor": "rgba(0, 0, 0, 1)",
        "underLineColor": "rgba(60, 120, 216, 1)",
        "trendLineColor": "rgba(60, 120, 216, 1)",
        "width": "100%",
        "height": "100%",
        "locale": "en"
    })
    this.myRef.current.appendChild(script);
  }

  render() {
    return(
    <div className="tradingview-widget-container" ref={this.myRef}>
        <div className="tradingview-widget-container__widget"></div>    
    </div>
    );
  }
}

Here's一个可行的例子

React卡中的交易视图小部件

2 个答案: