javascript - TradingView React 组件中的图表更新不起作用
问题描述
图表的符号正在另一个组件中选择,其中状态更新作为道具传递回此 TradingView 组件。
我正在尝试使用以下方法更改图表中的符号:
this.tvWidget.chart().setSymbol('BINANCE:' + this.props.selectedSymbol.name)
但是我应该在哪里以及如何放置和使用它呢?我很困惑。
我需要更改图表符号,但应该以什么方式发生?谢谢!
import * as React from 'react';
import './index.css';
import {widget} from '../../charting_library/charting_library.min';
import {setSymbol} from "../../store/actions/symbols";
import {connect} from "react-redux";
class TradingView extends React.PureComponent {
tvWidget = null;
widgetOptions = {
client_id: 'tradingview.com',
user_id: 'public_user_id',
datafeed: new window.Datafeeds.UDFCompatibleDatafeed('https://demo_feed.tradingview.com'),
charts_storage_url: 'https://saveload.tradingview.com',
symbol: "AAPL",
symbol: this.props.selectedSymbol ? this.props.selectedSymbol.name : "BTCUSDT",
snapshot_url: "https://www.tradingview.com/snapshot/",
enabled_features: ['study_templates'],
studies: ["RSI@tv-basicstudies", "StochasticRSI@tv-basicstudies", "MACD@tv-basicstudies"],
watchlist: ["BINANCE:BTCUSDT"],
disabled_features: ['use_localstorage_for_settings'],
library_path: '/charting_library/',
charts_storage_api_version: '1.1',
container_id: 'tv_chart_container',
debug: false,
interval: 'D',
theme: "Dark",
allow_symbol_change: true,
auto_save_delay: '5',
range: "6m",
hide_legend: true,
locale: "en",
timezone: "Europe/Berlin",
autosize: true,
enable_publishing: true,
};
componentDidMount() {
this.tvWidget = new widget(this.widgetOptions);
let tvWidget = this.tvWidget
tvWidget.onChartReady(() => {
tvWidget.headerReady().then(() => {
let chart = tvWidget.chart();
chart.onSymbolChanged().subscribe(null, onChartSymbolChanged);
})
})
let setSymbol = this.props.setSymbol
let symbols = this.props.symbols
function onChartSymbolChanged() {
let chart = tvWidget.chart();
console.log("onChartSymbolChanged changing symbol to " + chart.symbol());
setSymbol(symbol)
}
}
componentWillUnmount() {
if (this.tvWidget !== null) {
this.tvWidget.remove();
this.tvWidget = null;
}
}
render() {
this.tvWidget && this.tvWidget.symbol ? this.tvWidget.chart().setSymbol('BINANCE:' + this.props.selectedSymbol.name) : null
return (
<div
id="tv_chart_container"
className={'TVChartContainer'}
/>
);
}
}
const mapStateToProps = state => {
return {
symbols: state.symbols.symbols,
selectedSymbol: state.symbols.selectedSymbol
};
};
const mapDispatchToProps = {setSymbol}
export default connect(mapStateToProps, mapDispatchToProps)(TradingView);
解决方案
您可以通过传入 prevPops 来检查道具componentDidUpdate(prevProps) {}
并检查更改。
推荐阅读
- docker - 无法在 docker 中列出 docker 中的文件(dind)
- python - 如何在 Python 中用阿拉伯语重命名文件名
- c++ - 如何使用 if else 语句
- apache-spark - 在 pyspark 2.3 中,如何处理在 json 模式推断后不区分大小写导致的列名不明确?
- python - 根据另一个数据帧中的值从数据帧中选择行,并根据第二个数据帧用值更新其中一个列
- vhdl - 如何将 4 位全加器和 4:1 多路复用器加在一起?
- python - Python 3 中的递归
- c++ - 试图移动字符串中的每一位
- python - 如何从 pandas 中的多个数据框创建一个 Csv 文件,其中数据框的名称作为每列的标题?
- c# - Dynamics 365 CRM 集成