Question

向下滚动到有状态组件

复制+粘贴到我的codepen中，出现此控制台错误

Uncaught SyntaxError: Unexpected token <

以下是codepen link

这里也是代码本身：

class Timer extends React.Component {
    constructor(props) {
        super(props);
        this.state = {secondsElapsed: 0};
    }

    tick() {
        this.setState((prevState) => ({
          secondsElapsed: prevState.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 />, mountNode);

Answer 1

添加 Babel 作为预处理器，在HTML中添加要安装组件的节点。

<div id="mountNode"/>

更新了链接：https://codepen.io/DP888/pen/Gvdwzg?editors=1010

由于JSX语法和ES6在所有浏览器中都不受支持。因此，如果我们在React代码中使用它们，我们需要使用一种工具将它们转换为浏览器支持的格式。这是巴贝尔进入画面的地方。

反应示例网页的控制台错误 - 有状态组件

1 个答案: