简介
这里是我学习meteor,react及其相关技术的一些代码片段和总结，持续更新．．．
arrow function
箭头函数的使用方法：
- 使用大括号，里面必须有
return语句 - 使用括号，里面不用
return关键字，易读 - 不使用括号，适用于返回一条语句，不易读
12345678910111213 | Meteor.publish('posts.all', function() { return Posts.find({});});Meteor.publish('posts.all', () => { return Posts.find({});});//bestMeteor.publish('posts.all', () => ( Posts.find({})));//fineMeteor.publish('posts.all', () => Posts.find({}) ); |
mongo数据库链式操作
数据库结构：
- title —>string
- contents —>array
- name —>string
- read —>boolean
- …
- createdAt —> date
- …
需要传递的参数：
- title —>string
- contentName —> string
- read —>boolean
以下表示：找出标题为title,且内容的名字叫contentName的文章,并把它的内容中的已读值设置为read
1234 | Posts.update( { title: title, 'contents.name': contentName }, { $set: { 'contents.$.read': read } }); |
react dangerouslySetInnerHTML
注意大括号，接受object
1 | <div dangerouslySetInnerHTML={{ __html: content }}> |
react组件生命周期函数
上传并显示图片时，如果离开页面，然后再次返回，还会显示上次上传的图片，需要调用react的生命周期函数．
123456789101112131415 | componentWillMount() {//在这里不起作用 const {dispatch, addCover} = this.props; dispatch(addCover(''));},componentWillUnmount() {//需要在组件卸载前，清空一下图片地址 const {dispatch, addCover} = this.props; dispatch(addCover(''));},componentDidMount() {//在这里传入上传后的图片地址 const {dispatch, addCover} = this.props; dispatch(addCover(url));} |
大专栏 使用meteor/react过程中的一些代码片段headerlink" title="summernote编辑器显示内容">summernote编辑器显示内容
让编辑器初始化时就显示传入的一些内容，比如一个html中的section内容
1234567891011 | //最外层包裹编辑器，并通过dangerouslySetInnerHTML渲染html内容<div className='editor'> <div dangerouslySetInnerHTML={{ __html: section.content }}></div></div>//初始化，这样section中的内容就会在编辑器中渲染出来componentDidMount() { $('.editor').summernote({ height: 250 });} |
summernote编辑器的api调用
假如我们希望点击显示或隐藏按钮后，编辑器能够动态显示，而不刷新整个页面，需要如下操作
123456789101112131415161718192021222324252627282930 | //进入页面后，初始化编辑器componentDidMount() { $('.editor').summernote({ height: 250 });}//组件有更新，只需调用summernote的reset api即可实现componentDidUpdate() { $('.editor').summernote('reset');}//一个页面有多个编辑器，需要调用以下的生命周期函数和编辑器的api//进入页面后，初始化编辑器componentDidMount() { $('.editor').summernote({ height: 250 });},//在这里删除componentWillUpdate() { $('editor').each( () => $(this).summernote('destroy') );},//再次初始化componentDidUpdate() { $('.editor').summernote({ height: 250 });} |
lodash中sortBy进行数组排序
比如一篇文章有很多评论，需要根据评论数目进行排序，我们可以直接返回排序过的数组．
12 | const singlePost = Posts.findOne();const sortedComments = _.sortBy(singlePost.comments, ['count']); |