我在JSX中有一个react-stockchart图表示例:
JSX plunker:http://plnkr.co/edit/gist:b993d5fcc5c09dd66a6e?p=preview
我想将JSX添加到现有的TypeScript项目中,因此我将文件扩展名从JSX更改为TSX,并从此站点进行了其他转换:
http://slidedeck.io/thewazir/Using-Typescript-with-JSX
但问题仍然存在,此代码无法编译:
CandleStickChartWithBollingerBandOverlay = fitWidth(CandleStickChartWithBollingerBandOverlay);
ReactDOM.render(<CandleStickChartWithBollingerBandOverlay data={data} type="hybrid"/>, document.getElementById("chart"));
fitWidth 来源:https://github.com/rrag/react-stockcharts/blob/master/src/lib/helper/fitWidth.jsx
如果我删除 fitWidth ,则会以不正确的宽度绘制它:
ReactDOM.render(<CandleStickChartWithBollingerBandOverlay data={data} type="hybrid" width={800}/>, document.getElementById("chart"));
我尝试了这段代码,它不起作用(根本没有绘制):
var StockChartComponent = fitWidth(CandleStickChartWithBollingerBandOverlay);
ReactDOM.render(<StockChartComponent data={data} type="hybrid"/>, document.getElementById("chart"));
这也不起作用:
var StockChartComponent = fitWidth(new CandleStickChartWithBollingerBandOverlay());
ReactDOM.render(<StockChartComponent data={data} type="hybrid"/>, document.getElementById("chart"));
答案 0 :(得分:0)
这是主要的tsx文件:
export function initialize(data, element) {
var StockChartComponent = fitWidth(CandleStickChartWithBollingerBandOverlay);
ReactDOM.render(<StockChartComponent data={data} type="hybrid" height={800} />, element);
}
这是固定的fitWidth.tsx:
import React = require('react');
import ReactDOM = require('react-dom');
export function fitWidth(WrappedComponent, withRef = true) {
class ResponsiveComponent extends React.Component<any, any> {
static getDisplayName(Series) {
var name = Series.displayName || Series.name || "Series";
return name;
}
static defaultProps = {
displayName: `fitWidth(${ResponsiveComponent.getDisplayName(WrappedComponent)})`
}
constructor(props) {
super(props);
this.handleWindowResize = this.handleWindowResize.bind(this);
this.getWrappedInstance = this.getWrappedInstance.bind(this);
}
componentDidMount() {
window.addEventListener("resize", this.handleWindowResize);
var el = ReactDOM.findDOMNode(this);
var w = (el.parentNode as Element).clientWidth;
/* eslint-disable react/no-did-mount-set-state */
this.setState({
width: w
});
/* eslint-enable react/no-did-mount-set-state */
}
componentWillUnmount() {
window.removeEventListener("resize", this.handleWindowResize);
}
handleWindowResize() {
var el = ReactDOM.findDOMNode(this);
var w = (el.parentNode as Element).clientWidth;
this.setState({
width: w
});
}
getWrappedInstance() {
return (this.refs as any).component;
}
render() {
var ref = withRef ? { ref: "component" } : {};
if (this.state && this.state.width) {
return <WrappedComponent width={this.state.width} {...this.props} {...ref} />;
} else {
return <div />;
}
}
}
return ResponsiveComponent;
}