反应-stockchart：不能转换JSX到TSX

我有react-stockchart图表中JSX的例子：
JSX plunker：http://plnkr.co/edit/gist:b993d5fcc5c09dd66a6e?p=preview
反应-stockchart：不能转换JSX到TSX

我想JSX添加到现有的打字稿的项目，所以我改变了文件从JSX扩展到从本网站TSX并做其他convertions： 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"));

来源

2016-07-27 mirik

你可以添加一个plunker或共享任何错误消息？我对TS不熟悉，但是我想在未来的版本中添加对它的支持。 – rrag

没有错误消息，它只是没有通过编译，当它通过编译时，它什么也没有显示。 TypeScript不允许像JavaScript那样使用类。函数fitWidth假设接收类型或对象实例？ – mirik

它接受类型。既然你说'fitWidth'是罪魁祸首，你可以重写它以适应你的需要？ 'fitWidth'查找可用的宽度并返回一个新的更高阶的组件，该组件具有您作为输入传递的组件的预定义宽度。 – rrag

这是主要的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;

}

来源

2016-08-01 13:03:48 mirik

反应-stockchart：不能转换JSX到TSX

回答

相关问题