react 显示当前时间_如何在React中动态显示时间日期

您需要使用该状态来保持当前周结束并开始。只要道具或状态发生变化，组件都会重新渲染。你需要保持这个数据的状态(如果使用redux，你会从道具中获取数据)。

下面是一个使用ES6一个例子(请确保您的WebPack配置包括巴贝尔与0级)：

class WeekNav extends PureComponent {

componentWillMount() {

this.setState({

currentWeekStart: moment().startOf('week').format("MM/DD/YYYY"),

currentWeekEnd: moment().endOf('week').format("MM/DD/YYYY"),

});

}

prevWeek =() => {

const { currentWeekStart, currentWeekEnd } = this.state;

newStart = currentWeekStart.slice();

newEnd = currentWeekEnd.slice();

newWeekStart = moment(newStart).subtract(7, 'days').format("MM/DD/YYYY");

newWeekEnd = moment(newEnd).subtract(7, 'days').format("MM/DD/YYYY");

this.setState({

currentWeekStart: newWeekStart,

currentWeekEnd: newWeekEnd,

});

}

upcomingWeek =() => {

const { currentWeekStart, currentWeekEnd } = this.state;

newStart = currentWeekStart.slice();

newEnd = currentWeekEnd.slice();

newWeekStart = moment(newStart).add(7, 'days').format("MM/DD/YYYY");

newWeekEnd = moment(newEnd).add(7, 'days').format("MM/DD/YYYY");

this.setState({

currentWeekStart: newWeekStart,

currentWeekEnd: newWeekEnd,

});

}

render: function() {

const { currentWeekStart, currentWeekEnd } = this.state;

return (

arrow_back

{currentWeekStart} - {currentWeekEnd}

arrow_forward

);

}

}

PS：这将会是很容易更新我以前的代码使用React.createClass到ES5。