반응-stockchart를 : TSX

에 JSX을 변환 할 수 없습니다 내가 JSX에서 react-stockchart 차트의 예를 가지고 :
JSX을 plunker : http://plnkr.co/edit/gist:b993d5fcc5c09dd66a6e?p=preview
반응-stockchart를 : TSX

내가 기존 타이프 라이터 프로젝트에 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 소스 :

나는이 코드를 시도

ReactDOM.render(<CandleStickChartWithBollingerBandOverlay data={data} type="hybrid" width={800}/>, document.getElementById("chart"));

, 그것은 (아무것도 전혀 그려지지 않습니다) 작동하지 않습니다 : 나는 fitWidth을 제거하면 https://github.com/rrag/react-stockcharts/blob/master/src/lib/helper/fitWidth.jsx
그것은 잘못된 폭이 그려집니다

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를 추가하거나 공유 할 수

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;

}

? 나는 TS에 익숙하지 않다. 그러나 이후 버전에서 지원을 추가하는 것은 내 마음에 간다. – rrag

오류 메시지가 없다. 단지 컴파일을 통과하지 못하고 컴파일을 통과 할 때 전혀 아무것도 표시하지 않는다. TypeScript는 자바 스크립트처럼 클래스 작업을 허용하지 않습니다. 함수 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 :

출처

2016-08-01 13:03:48 mirik

답변

관련 문제