Use meteor / code snippets react during

Brief introduction

Here is what I learned meteor,reactsome code fragments and summary and related technology, continuously updated. . .

arrow function

Use the arrow functions:

The use of braces, which must have a returnstatement
Use brackets, which do not have returnkeywords, and easy to read
Do not use brackets for a return statement, easy to read

Meteor.publish('posts.all', function() {
  return Posts.find({});
});

Meteor.publish('posts.all', () => {
  return Posts.find({});
});
//best
Meteor.publish('posts.all', () => (
  Posts.find({})
));
//fine
Meteor.publish('posts.all', () => Posts.find({}) );

mongo database chaining

Database structure:

title —>string
contents —>array
- name —>string
- read —>boolean
- …
createdAt —> date
…

Need to pass parameters:

title —>string
contentName —> string
read —>boolean

The following shows: Find the title title, and called the name of the contents of contentNamethe article and read the value of its content isread

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

react dangerouslySetInnerHTML

Note braces, accepted object

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

react component lifecycle methods

When you upload and display pictures, if you leave the page, and then back again, along with the last upload pictures, you need to call reactthe life cycle of the function.

componentWillMount () { 
// does not work here const {dispatch, addCover} = the this .props;   dispatch (addCover ( '' )); }, componentWillUnmount () { // requires assembly before unloading, emptying at the picture address const dispatch {,} = addCover the this .props;   dispatch (addCover ( '' )); }, componentDidMount () { // the address where image upload incoming const {dispatch, addCover} = the this .props;   dispatch (addCover (URL)); }

Large column using meteor / react during some of the code fragment headerlink "title =" summernote Editor display content "> summernote editor to display the contents of

Some incoming content is displayed, such as the contents of a section of html editor to make when initializing

// outermost wrapping editor and rendering html content by dangerouslySetInnerHTML
 <className = div 'Editor' > 
  <div dangerouslySetInnerHTML = {{ __html : section.content}}> </ div >
 < / div>

/ / Initialization, the contents of this section will be rendered in the editor out 
componentDidMount () { 
  $ ( 'Editor.') Summernote ({. 
    Height: 250 
  }); 
}

api calls summernote editor

If we want to click on the Show or Hide button, the editor can dynamically display without refreshing the entire page, you need the following operations

// After entering the page, the editor initialization
 componentDidMount () { 
  $ ( '.editor' ) .summernote ({ 
    height: 250
   }); 
} 
// the components are updated, simply call reset api summernote can be realized
 componentDidUpdate () { 
  $ ( '.editor' ) .summernote ( 'RESET' ); 
}

// page has a plurality of editors, it is necessary to call a function of the life cycle and the following editor api 
// After entering the page, the editor initialization
 componentDidMount () { 
  $ ( '.editor' ) .summernote ({ 
    height: 250
   } ); 
} 
// remove here
 componentWillUpdate () { 
  $ ( 'Editor' ) .each ( () =>
     $ ( the this ) .summernote ( 'the destroy' ) 
  ); 
} 
// re-initialized
 componentDidUpdate () { 
  $ ( '.editor' ) .summernote ({ 
    height: 250
   }); 
}

lodash array sorting performed in sortBy

For example, an article there are a lot of comments, you need to be sorted according to the number of comments, we can return the sorted array.

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