简介

这里是我学习meteor,react及其相关技术的一些代码片段和总结，持续更新．．．

arrow function

箭头函数的使用方法：

  • 使用大括号，里面必须有return语句
  • 使用括号，里面不用return关键字，易读
  • 不使用括号，适用于返回一条语句，不易读
1
2
3
4
5
6
7
8
9
10
11
12
13
Meteor.publish('posts.all', function() {
  return Posts.find({});
});
//better
Meteor.publish('posts.all', () => {
  return Posts.find({});
});
//best
Meteor.publish('posts.all', () => (
  Posts.find({})
));
//fine
Meteor.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

1
2
3
4
Posts.update(
  { title: title, 'contents.name': contentName },
  { $set: { 'contents.$.read': read } }
);

react dangerouslySetInnerHTML

注意大括号，接受object

1
<div dangerouslySetInnerHTML={{ __html: content }}>

react组件生命周期函数

上传并显示图片时，如果离开页面，然后再次返回，还会显示上次上传的图片，需要调用react的生命周期函数．

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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));
}

summernote编辑器显示内容

让编辑器初始化时就显示传入的一些内容，比如一个html中的section内容

1
2
3
4
5
6
7
8
9
10
11
//最外层包裹编辑器，并通过dangerouslySetInnerHTML渲染html内容
<div className='editor'>
  <div dangerouslySetInnerHTML={{ __html: section.content }}></div>
</div>

//初始化，这样section中的内容就会在编辑器中渲染出来
componentDidMount() {
  $('.editor').summernote({
    height: 250
  });
}

summernote编辑器的api调用

假如我们希望点击显示或隐藏按钮后，编辑器能够动态显示，而不刷新整个页面，需要如下操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
//进入页面后，初始化编辑器
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进行数组排序

比如一篇文章有很多评论，需要根据评论数目进行排序，我们可以直接返回排序过的数组．

1
2
const singlePost = Posts.findOne();
const sortedComments = _.sortBy(singlePost.comments, ['count']);