react-stockchart：无法将 JSX 转换为 TSX

Question

我有一个 JSX 中的 react-stockchart 图表示例：
JSX 插件：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"));

适合宽度 来源：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;

}

react-stockchart：无法将 JSX 转换为 TSX

react-stockchart: cannot convert JSX to TSX

svg

jsx

typescript

reactjs

tsx