javascript - 更新 TradingView Hotlist 小部件 onChange

Question

下面是我用于启动小部件的组件，我想在从选择标签中选择新值时更改交换。onChange 更改状态值，但小部件不会更改它正在查看的值。任何想法如何使它工作？

import React from "react"; 

export default  class StockGainer extends React.PureComponent {
    constructor(props) {
        super(props);
        this._ref = React.createRef();
        this.state = { 
        exchange:
         "TSX" 
        }
    }
 componentDidMount() {
        const script = document.createElement('script');
        script.src = 'https://s3.tradingview.com/external-embedding/embed-widget-hotlists.js' 
        script.async = true;
        this._ref.current.appendChild(script);
        script.innerHTML = JSON.stringify(
            {
                  "colorTheme": "dark",
                  "dateRange": "12M",
                  "exchange": `${this.state.exchange}`,
                  "showChart": true,
                  "locale": "en"
                })
    }
   


    render() {

        const Changeexchange = (e) => { 

            this.setState({exchange: e.target.value})
        }  

        const SelectBox = () => (
            <div class="select-div">
            <select className="exchange" value={this.state.exchange} name="pagination" onChange={Changeexchange}>
              <option value="US"> USA (US Exchanges)</option>
              <option value="NASDAQ"> USA (NASDAQ)</option>
              <option value="NYSE"> USA (NYSE)</option>
              <option value="AMEX"> USA (NYSE ARCA)</option>
              <option value="OTC"> USA (OTC)  </option>
            </select>
            </div>
        )

        return(
          
        <div class="tradingview-widget-container" ref={this._ref}>
            <div style={{position:"absolute", top: "0px", left:"318px"}}>{SelectBox()}</div> 
         <div class="tradingview-widget-container__widget"> </div>
          {console.log(this.state.exchange)}
        </div>
        );
    }
   
}

标签： javascriptreactjstradingview-api

Answer 1

改变状态的交换是不够的，如果你想更新小部件，你需要再次创建整个脚本标签。您可以创建函数“updateWidget”并在 componentDidMount 和 changeExhange 函数中调用它。

我还为小部件tradingView创建了新的 div ，我们需要在每次更新小部件时使用 innerHTML='' 清除它。否则每次我们更改交换时它都会创建多个小部件。

import React from "react"; 

export default  class StockGainer extends React.PureComponent {
  constructor(props) {
      super(props);
      this._ref = React.createRef();
      this.state = { 
      exchange:
       "TSX" 
      }
  }
componentDidMount() {
    this.updateWidget()
  }
 
  updateWidget(){
      this._ref.current.innerHTML=''
      const script = document.createElement('script');
      script.src = 'https://s3.tradingview.com/external-embedding/embed-widget-hotlists.js' 
      script.async = true;
      this._ref.current.appendChild(script);
      script.innerHTML = JSON.stringify(
          {
                "colorTheme": "dark",
                "dateRange": "12M",
                "exchange": `${this.state.exchange}`,
                "showChart": true,
                "locale": "en"
              })
  }

  render() {

      const Changeexchange = (e) => { 

          this.setState({exchange: e.target.value})
          this.updateWidget()

      }  

      const SelectBox = () => (
          <div class="select-div">
          <select className="exchange" value={this.state.exchange} name="pagination" onChange={Changeexchange}>
            <option value="US"> USA (US Exchanges)</option>
            <option value="NASDAQ"> USA (NASDAQ)</option>
            <option value="NYSE"> USA (NYSE)</option>
            <option value="AMEX"> USA (NYSE ARCA)</option>
            <option value="OTC"> USA (OTC)  </option>
          </select>
          </div>
      )

      return(
        
      <div class="tradingview-widget-container" >
          <div style={{position:"absolute", top: "0px", left:"318px"}}>{SelectBox()}</div> 
          <div ref={this._ref} id='tradingView'></div>
       <div class="tradingview-widget-container__widget"> </div>
        {console.log(this.state.exchange)}
      </div>
      );
  }
 
}