反応-stockchartを：<br/> JSXのplunker：私はJSXで<a href="https://github.com/rrag/react-stockcharts" rel="nofollow">react-stockchart</a>チャートの一例を持っているTSX

Question

にJSXを変換することはできませんhttp://plnkr.co/edit/gist:b993d5fcc5c09dd66a6e?p=preview

私は、既存の活字体プロジェクトにJSXを追加したいので、私は、ファイルを変更JSXからの拡張子は、このサイトから他のconvertionsを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")); 

Answer 1

これは、メインの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; 

}