回到命令行，先去安装一下 moment .. yarn add moment ... 笔记的更新时间我要用到这个包提供的功能去格式化一下 ..

再安装一个 lodash ... yarn add lodash .. 笔记的标题内容我想用这个包提供的截取内容的功能，去截取一下笔记内容，然后让截取之后的内容作为笔记的标题 ..

再找到 Note 组件 ...

在文件的一开始，可以先导入一下 moment ... 来自 moment ... 然后再导入 moment 里的简体中文语言 .. 位置是 moment/locale/zh-cn

再配置一下，让 moment 使用简单中文语言 .. moment.locale('zh-CN')

再导入 lodash ... 导入进来的名字是 _ ，来自 lodash 这个包 ..

getter 方法

在组件里，我们再去定义几个方法，它们可以返回格式化之后的数据 .. 先添加一个 updated ... 这个方法 return 的是格式化之后的更新时间 .. 用一下 moment 处理一下 this.state.updated .. 显示的格式是 fromNow()

然后再定义一个方法 .. 名字叫 header ， return 的是，用一下 lodash 的 truncate ，去截取一下 this.state.body 内容 .. 一个配置参数对象 .. length ，长度设置成 30 ... 后面再加上一个或者，如果笔记里没有内容，我们就显示一个 新建笔记 ..

再添加一个 words .. 它可以返回笔记内容的字数 .. return 的是 this.state.body.length

然后我们再用一下这些格式化以后的数据 ..

显示更新时间这里，用一下 this.updated() ... 笔记的 heade 元素里面，用一下 this.header() ...

显示笔记字数这里，再用一下 this.words() ...

预览

再到浏览器上预览一下 ....