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

Question

代码片段可在 react webpage 上找到。

向下滚动到有状态组件

复制+粘贴到我的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

Add Babel as preprocessor, add node in HTML where you wish to mount the component.

<div id="mountNode"/>

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

As the JSX syntax and ES6, are not supported in all the browsers.Hence, if we are using them in the React code, we need to use a tool which translates them to the format that has been supported by the browsers. It’s where babel comes into the picture.