javascript - 使用 ReactJS 以两位数显示 getHours() 和 getMinutes()

Question

我的实时时钟工作得很好，除了早上，它在应该显示 01:02:03 时显示 1:2:3

>

我如何修改它以在 ReactJS 组件中工作？我对 React 很陌生，实现 javascript 函数的方法不太一样，所以我不能真正使用我找到的任何常规 JS 答案。这是我的类(class)中的代码:

class SidebarContent extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            date: new Date()
        };
    }

    componentWillUnmount() {
        clearInterval(this.timerID);
    }

    tick() {
        this.setState({date: new Date()});
    }

    getHours() {
        return this.state.date.getHours();
    }
    getMinutes() {
        return this.state.date.getMinutes();
    }

    getSeconds() {
        return this.state.date.getSeconds();
    }


    componentDidMount() {

       this.timerID = setInterval(() => this.tick(), 1000);
    }

    render() {

    return (
        <ul className="nav" ref={(c) => {this.nav = c; }}>
            <li className="today">
                <Row className="clock" center="xs">
                    <Row center="xs">
                        <span className="hours">{this.getHours()}</span>
                        <span>:</span>
                        <span className="min">{this.getMinutes()}</span>

                        <span className="sec">{this.getSeconds()}</span>
                    </Row>
                </Row>
                <Row className="date" center="xs">
                    <p className="today-is">{this.state.date.toDateString()}</p>
                </Row>
            </li>
        </ul>
      );
   }
}

提前致谢

Answer 1

填充时间本质上是这样的:

if (seconds < 10) {
   return '0' + seconds;
} else {
   return '' + seconds;
}

或

const pad = (seconds < 10) ? '0' : '';
return pad + seconds;

总计:

getFormattedTime() {
    const {date} = this.state;
    const timeComponents = [date.getHours(), date.getMinutes(), date.getSeconds()];
    return timeComponents
        .map(component => {
            const pad = (component < 10) ? '0' : '';
            return pad + component;
        })
        .join(':');
}