Question

教程来源：有状态组件 - https://facebook.github.io/react/

这是我的代码：

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')
);

在html中，它返回timer.js:26 Uncaught TypeError: Cannot read property 'secondsElapsed' of null。为什么是nullElapsed？

发生了什么事？

Answer 1

React ES6-class没有getInitialState方法。此方法仅包含由React.createClass({})

创建的组件

在React类中，您可以在构造函数中手动设置状态：

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

React docs about ES6-classes

如何在教程中实现tsx？

1 个答案: