使用从PageLoad

Question

我试图在反应js中创建一个自动启动秒表，但我不断收到以下错误消息：

语法错误：这是一个保留字（82:13）

80 | render（）{   81 |回来（   82 | {} this.state.counter   83 | {} this.state.miliseconds   84 |   85 |

这是我的代码，如果有人指出错误，我将非常感激：

＆＃13;

＆＃13;

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;

＆＃13;

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;
}

＆＃13;

＆＃13;

＆＃13;

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