Javascript React卡中的交易视图小部件

试图让TradingView小部件进入react，但现在没有显示任何内容

在这个问题之后，我尝试了几种不同的语法：

但到目前为止运气不好

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 -->

这是我要添加的小部件：
通过TradingView
新TradingView.MediumWidget(
{
“容器id”：“电视媒体小部件”，
“符号”：[
[
“比特币”，
“BITMEX:XBTUSD | 1m”
],
[
“以太坊”，
“比特墨西哥币：百万美元”
]
],
“greyText”：“引用人”，
“网格线颜色”：“rgba（182、182、182、0.65）”，
“fontColor”：“rgba（0,0,0,1）”，
“下划线颜色”：“rgba（60、120、216、1）”，
“趋势线颜色”：“rgba（60、120、216、1）”，
“宽度”：“100%”，
“高度”：“100%”，
“区域设置”：“en”
}
);

这就是我迄今为止所做的：

// 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;

//呈现组件以显示加密货币价格
类MenuCard扩展了组件{
componentDidMount（）{
const script=document.createElement（'script'）；
script.src=https://s3.tradingview.com/tv.js'
script.async=false；
script.innerHTML=JSON.stringify({
“容器id”：“电视媒体小部件”，
“符号”：[
[
“比特币”，
“BITMEX:XBTUSD | 1m”
],
[
“以太坊”，
“比特墨西哥币：百万美元”
]
],
“greyText”：“引用人”，
“网格线颜色”：“rgba（182、182、182、0.65）”，
“fontColor”：“rgba（0,0,0,1）”，
“下划线颜色”：“rgba（60、120、216、1）”，
“趋势线颜色”：“rgba（60、120、216、1）”，
“宽度”：“100%”，
“高度”：“100%”，
“区域设置”：“en”
})
document.getElementById（“myContainer”）.appendChild（脚本）；
}
render（）{
返回(
)
}
}
MenuCard.defaultProps={
MenuCard:[]
}
导出默认菜单；

---

目前屏幕上没有显示任何内容，因此理想的情况是让小部件显示。

使用

https://s3.tradingview.com/external-embedding/embed-widget-market-overview.js

作为脚本源

此外，在React之后，您需要创建一个

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

类菜单扩展组件{
建造师（道具）{
超级（道具）；
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({
“容器id”：“电视媒体小部件”，
“符号”：[
[
“比特币”，
“BITMEX:XBTUSD | 1m”
],
[
“以太坊”，
“比特墨西哥币：百万美元”
]
],
“greyText”：“引用人”，
“网格线颜色”：“rgba（182、182、182、0.65）”，
“fontColor”：“rgba（0,0,0,1）”，
“下划线颜色”：“rgba（60、120、216、1）”，
“趋势线颜色”：“rgba（60、120、216、1）”，
“宽度”：“100%”，
“高度”：“100%”，
“区域设置”：“en”
})
this.myRef.current.appendChild（脚本）；
}
render（）{
返回(
);
}
}

---

一个工作示例将脚本添加到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;

//呈现组件以显示加密货币价格
类MenuCard扩展组件{
componentDidMount（）{
const script=document.createElement（'script'）；
script.innerHTML=new window.TradingView.MediumWidget({
“容器id”：“电视媒体小部件”，
“符号”：[
[
“比特币”，
“BITMEX:XBTUSD | 1m”
],
[
“以太坊”，
“比特墨西哥币：百万美元”
]
],
“greyText”：“引用人”，
“网格线颜色”：“rgba（182、182、182、0.65）”，
“fontColor”：“rgba（0,0,0,1）”，
“下划线颜色”：“rgba（60、120、216、1）”，
“趋势线颜色”：“rgba（60、120、216、1）”，
“宽度”：“100%”，
“高度”：“100%”，
“区域设置”：“en”
})
document.getElementById（“myContainer”）.appendChild（脚本）；
}
render（）{
返回(
)
}
}
MenuCard.defaultProps={
MenuCard:[]
}
导出默认菜单；

Hey@Lucas，你成功了吗？请检查下面答案中给出的代码笔示例：为我工作。非常感谢。