Javascript 使用ReactJS以两位数显示getHours（）和getMinutes（）

我有一个实时时钟工作得很好，除了在早上，它显示

1:2:3

应该显示

01:02:03

如何修改它以在ReactJS组件中工作？我对React非常陌生，实现javascript函数的方法也不尽相同，因此我无法真正使用我找到的任何常规JS答案。下面是我班上的代码：

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

类侧边栏内容扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
日期：新日期（）
};
}
组件将卸载（）{
clearInterval（this.timerID）；
}
勾选（）{
this.setState（{date:new date（）}）；
}
getHours（）{
返回此.state.date.getHours（）；
}
getMinutes（）{
返回此.state.date.getMinutes（）；
}
getSeconds（）{
返回此.state.date.getSeconds（）；
}
componentDidMount（）{
this.timerID=setInterval（（）=>this.tick（），1000）；
}
render（）{
返回(
{this.nav=c；}}>

{this.getHours（）}
:
{this.getMinutes（）}
{this.getSeconds（）}
{this.state.date.toDateString（）}


);
}
}

---

提前感谢

React是普通javascript。您完全可以在其中使用任何普通javascript。您的问题与react无关，而与javascript有关

Date（）

的方法返回一位数字。您需要以某种方式填充输出。请参见，您可以使用功能padStart from。您可以安装整个lodash库或独立软件包

要显示前导的

0

，可以执行以下操作：

//这里您将从lodash包导入函数
//从“lodash.padStart”导入padStart；
//或
//从“lodash/padStart”导入padStart；
const padStart=u.padStart；
类SidebarContent扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
日期：新日期（）
};
}
组件将卸载（）{
clearInterval（this.timerID）；
}
勾选（）{
这是我的国家({
日期：新日期（）
});
}
getHours（）{
返回padStart（this.state.date.getHours（），2，'0'）；
}
getMinutes（）{
返回padStart（this.state.date.getMinutes（），2，'0'）；
}
getSeconds（）{
返回padStart（this.state.date.getSeconds（），2，'0'）；
}
componentDidMount（）{
this.timerID=setInterval（（）=>this.tick（），1000）；
}
render（）{
报税表（<
ul className=“导航”
参考={
（c） =>{
this.nav=c；
}
} >
<
li className=“今天”>
<
div className=“时钟”
center=“xs”>
<
div center=“xs”>
<
span className=“小时数”>{
这个。getHours（）
}<
span>：<
span className=“min”>{
这个。getMinutes（）
}<
span>：<
span className=“sec”>{
这个。getSeconds（）
}<
/div><
/div><
div className=“日期”
center=“xs”>
<
p className=“今天是”>{
this.state.date.toDateString（）
}
<
/div><
/李><
/ul>
);
}
}
render（，document.getElementById（“app”）
前一段时间，我在倒计时应用程序中就是这样做的。这里给定以秒为单位的时间，它返回一个JSON对象，以两位数格式表示小时、分钟和秒

  secondsToTime(secs) {
    let hours = `${constants.ZERO}${Math.floor(secs / (60 * 60))}`.slice(-2);

    let divisorForMinutes = secs % (60 * 60);
    let minutes = `${constants.ZERO}${Math.floor(divisorForMinutes / 60)}`.slice(-2);

    let divisorForSeconds = divisorForMinutes % 60;
    let seconds = `${constants.ZERO}${Math.ceil(divisorForSeconds)}`.slice(-2);

    let obj = {
      "h": hours,
      "m": minutes,
      "s": seconds
    };
    return obj;
  }

您可以像这样访问这些值

var remainingTime = this.secondsToTime(timeInSeconds);
remainingTime["h"] // gives you hours
remainingTime["m"] // gives you minutes
remainingTime["s"] // gives you seconds

这种方法比调用3个函数分别获取小时、分钟和秒要好得多，这对我来说有点尴尬。希望这有帮助。快乐编码
 如果你愿意的话，你可以把格式化的东西忘了。momentjs会处理好的。您只需要指定格式。我相信它看起来会比填充物干净得多

class SidebarContent extends React.Component {

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

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

    tick() {
        this.setState({date: moment()});
    }

    getTime() {
        return this.state.date.format('HH:mm:ss')
    }

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

    render() {

    return (
        <ul className="nav" ref={(c) => {this.nav = c; }}>
            <li className="today">
                <div className="clock" center="xs">
                    <div center="xs">
                        <span className="hours">{this.getTime()}</span>
                    </div>
                </div>
                <div className="date" center="xs">
                    <p className="today-is">
                    {this.state.date.format('ddd MMM DD YYYY')}</p>
                </div>
            </li>
        </ul>
      );
   }
}

类侧边栏内容扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
日期:矩()
};
}
组件将卸载（）{
clearInterval（this.timerID）；
}
勾选（）{
this.setState（{date:moment（）}）；
}
getTime（）{
返回此.state.date.format（'HH:mm:ss'）
}
componentDidMount（）{
this.timerID=setInterval（（）=>this.tick（），1000）；
}
render（）{
返回(
{this.nav=c；}}>

{this.getTime（）}

{this.state.date.format（'ddd-MMM-DD-YYYY'）}


);
}
}

这是同样的小提琴
 填充时间基本上是这样的：

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

if（秒<10）{
返回“0”+秒；
}否则{
返回“”+秒；
}

或

const pad=（秒<10）？'0' : '';
返回焊盘+秒；

总计：

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(':');
}

getFormattedTime（）{
const{date}=this.state；
常量timeComponents=[date.getHours（），date.getMinutes（），date.getSeconds（）]；
返回时间组件
.map（组件=>{
常数pad=（组件<10）“'0'：”；
返回垫+组件；
})
。加入（“：”）；
}
这真是太棒了！我得到一个重复的声明“padStart”然而。但我只导入一次/你不是德克拉
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(':');
}