Wie implementiere ich in TSX aus Tutorial?

Question

Das Tutorial Quelle: Eine Stateful Component - https://facebook.github.io/react/

Dies ist mein Code:

interface Props { 

} 

interface State { 
    secondsElapsed: number, 
} 


class Timer extends React.Component<Props, State> { 
    private interval: number; 

    getInitialState() { 
     return { secondsElapsed: 0 }; 
    } 
    tick() { 
     this.setState({ secondsElapsed: this.state.secondsElapsed + 1 }); 
    } 
    componentDidMount() { 
     this.interval = setInterval(this.tick, 1000); 
    } 
    componentWillUnmount() { 
     clearInterval(this.interval); 
    } 
    render() { 
     return (
      <div>Seconds Elapsed: {this.state.secondsElapsed}</div> 
     ); 
    } 
} 


ReactDOM.render(
    <Timer />, 
    document.getElementById('example') 
); 

In html, es timer.js:26 Uncaught TypeError: Cannot read property 'secondsElapsed' of null zurückgibt. Warum ist null von secondsElapsed?

Was ist passiert?

Answer 1

React ES6-Klassen haben keine getInitialState Methode. Dieses Verfahren hat nur Komponenten, die durch React.createClass({})

In Reaktion Klassen erstellt wurde Sie Zustand manuell in Konstruktor festlegen:

constructor() { 
    super(); 
    this.state = { 
     secondsElapsed: 0 
    }; 
} 

React docs about ES6-classes