export default class extends Component {
render() {
return (
<div>
{
/***
* enter the code here
*/
}
</div>
)
}
}
问问题
10338 次
4 回答
13
export default class Tabsshow extends React.PureComponent {
constructor(props) {
super(props);
this._ref = React.createRef();
}
componentDidMount() {
const script = document.createElement('script');
script.src = 'https://s3.tradingview.com/external-embedding/embed-widget-market-overview.js'
script.async = true;
script.innerHTML = /* JSON-ENCODED SETTINGS STRING FROM EMBED CODE */
this._ref.current.appendChild(script);
}
render() {
return(
<div class="tradingview-widget-container" ref={this._ref}>
<div class="tradingview-widget-container__widget"></div>
</div>
);
}
}
于 2018-12-21T08:05:40.247 回答
3
这应该适用于您的情况
class App extends React.Component {
componentDidMount() {
const script = document.createElement('script');
script.src = 'https://s3.tradingview.com/external-embedding/embed-widget-market-overview.js'
script.async = true;
script.innerHTML = JSON.stringify({ /* JSON object */})
document.getElementById("myContainer").appendChild(script);
}
render() {
return(
<div id="myContainer">
<div className="tradingview-widget-container">
<div className="tradingview-widget-container__widget">
</div>
</div>
</div>
);
}
}
于 2019-05-16T07:50:00.083 回答
1
使用以下库：
https://github.com/rafaelklaessen/react-tradingview-widget
import TradingViewWidget, { Themes } from 'react-tradingview-widget';
const App = () => (
<TradingViewWidget
symbol="NASDAQ:AAPL"
theme={Themes.DARK}
locale="fr"
autosize
/>
);
于 2020-11-13T16:41:38.130 回答
1
我建议你使用React Helmet
下面是一个给定的演示：
import React from "react";
import {Helmet} from "react-helmet";
class Application extends React.Component {
render () {
return (
<div className="application">
<Helmet>
<meta charSet="utf-8" />
<title>My Title</title>
<link rel="canonical" href="http://example.com/example" />
</Helmet>
...
</div>
);
}
};
您还可以在代码中添加脚本。让我知道它是否对您有帮助。
已编辑
在您的情况下，您可以执行以下操作：
import React from "react";
import {Helmet} from "react-helmet";
export default class MyPro extends Component {
render() {
return (
<Helmet>
<script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-market-overview.js" async>
{`
{
"showChart": true,
"locale": "en",
"largeChartUrl": "",
"width": "400",
"height": "600",
"plotLineColorGrowing": "rgba(60, 188, 152, 1)",
"plotLineColorFalling": "rgba(255, 74, 104, 1)",
"gridLineColor": "rgba(233, 233, 234, 1)",
"scaleFontColor": "rgba(214, 216, 224, 1)",
"belowLineFillColorGrowing": "rgba(60, 188, 152, 0.05)",
"belowLineFillColorFalling": "rgba(255, 74, 104, 0.05)",
"symbolActiveColor": "rgba(242, 250, 254, 1)",
"tabs": [
{
"title": "Indices",
"symbols": [
{
"s": "INDEX:SPX",
"d": "S&P 500"
},
{
"s": "INDEX:IUXX",
"d": "Nasdaq 100"
},
{
"s": "INDEX:DOWI",
"d": "Dow 30"
},
{
"s": "INDEX:NKY",
"d": "Nikkei 225"
},
{
"s": "INDEX:DAX",
"d": "DAX Index"
},
{
"s": "OANDA:UK100GBP",
"d": "FTSE 100"
}
],
"originalTitle": "Indices"
},
{
"title": "Commodities",
"symbols": [
{
"s": "CME_MINI:ES1!",
"d": "E-Mini S&P"
},
{
"s": "CME:E61!",
"d": "Euro"
},
{
"s": "COMEX:GC1!",
"d": "Gold"
},
{
"s": "NYMEX:CL1!",
"d": "Crude Oil"
},
{
"s": "NYMEX:NG1!",
"d": "Natural Gas"
},
{
"s": "CBOT:ZC1!",
"d": "Corn"
}
],
"originalTitle": "Commodities"
},
{
"title": "Bonds",
"symbols": [
{
"s": "CME:GE1!",
"d": "Eurodollar"
},
{
"s": "CBOT:ZB1!",
"d": "T-Bond"
},
{
"s": "CBOT:UD1!",
"d": "Ultra T-Bond"
},
{
"s": "EUREX:GG1!",
"d": "Euro Bund"
},
{
"s": "EUREX:II1!",
"d": "Euro BTP"
},
{
"s": "EUREX:HR1!",
"d": "Euro BOBL"
}
],
"originalTitle": "Bonds"
},
{
"title": "Forex",
"symbols": [
{
"s": "FX:EURUSD"
},
{
"s": "FX:GBPUSD"
},
{
"s": "FX:USDJPY"
},
{
"s": "FX:USDCHF"
},
{
"s": "FX:AUDUSD"
},
{
"s": "FX:USDCAD"
}
],
"originalTitle": "Forex"
}
]
}
`}
</script>
</Helmet>
)
}
}
于 2018-12-19T06:09:01.387 回答