用react JavaScript进行秒表，该javaScript启动OnPageload

Question

我正在尝试在React JS中创建自动启动秒表，但是我一直收到以下错误消息：

语法错误：这是一个保留的单词(82:13(

80 |使成为(( { 81 |返回 ( 82 |{this.state.counter} 83 |{this.state.miliseconds} 84 | 85 |

这是我的代码，如果有人指出错误：

import React, { Component } from 'react';
import './StopWatch.css';
class StopWatch extends Component {
    state = {
        timer: null,
        counter: '00',
        miliseconds: '00',
        startDisabled: true,
        stopDisabled: false
    }
    constructor(props) {
        super(props);
        
        this.onPageLoad = this.onPageLoad.bind(this);
        this.onButtonStart = this.onButtonStart.bind(this);
        this.onButtonStop = this.onButtonStop.bind(this);
        this.onButtonReset = this.onButtonReset.bind(this);
        this.start = this.start.bind(this);
    }
    componentDidMount() {
        this.start();
    }
    componentWillUnmount() {
        clearInterval(this.state.timer);
    }
    start() {
        var self = this;
        let timer = setInterval(() => {
            var num = (Number(this.state.miliseconds) + 1).toString(),
                count = this.state.counter;
            if (Number(this.state.miliseconds) == 99) {
                count = (Number(this.state.counter) + 1).toString();
                num = '00';
            }
            self.setState({
                counter: count.length == 1 ? '0' + count : count,
                miliseconds: num.length == 1 ? '0' + num : num
            });
        }, 0);
        this.setState({ timer });
    }
    onPageLoad() {
        this.start();
        this.setState({ startDisabled: true, stopDisabled: false });
    }
    
    onButtonStart() {
        this.start();
        this.setState({ startDisabled: true, stopDisabled: false });
    }
    onButtonStop() {
        clearInterval(this.state.timer);
        this.setState({ startDisabled: false, stopDisabled: true });
    }
    onButtonReset() {
        this.setState({
            timer: null,
            counter: '00',
            miliseconds: '00'
        });
    }
    render() {
        return (
            {this.state.counter}
            {this.state.miliseconds}
            <button title="Start" disabled="disabled"></button>
            <button title="Stop" disabled="disabled"></button>
            <button title="Reset" disabled="disabled"></button>
        );
    }
}
export default StopWatch;

container {
    flex: 1;
    justify-content: 'center';
    align-items: 'center';
    background-color: '#F5FCFF';
}
counter {
    font-size: 60;
    text-align: 'center';
    height: 60;
    margin: 10;
}
miniCounter {
    font-size:20;
    position: 'relative';
    top: -32;
    right: -50;
}

Answer 1

您应该在 div

中扭曲元素

render() {
    return (
     <div>
        <p>{this.state.counter ? this.state.counter : 'counter state is empty'}</p>
         <p>{this.state.miliseconds ? this.state.miliseconds : 'miliseconds state is empty'}</p>
        <button title="Start" disabled="disabled"></button>
        <button title="Stop" disabled="disabled"></button>
        <button title="Reset" disabled="disabled"></button>
     </div>
    );
}