Created
July 3, 2017 08:39
-
-
Save chj1768/a4c39d39b52e41605c7f42e1fcbde2dd to your computer and use it in GitHub Desktop.
how to use mixin, publish&subscribe(meteor) in React es6
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
export const ErrorMixins = { | |
bye() { | |
console.log('bye'); | |
} | |
}; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from 'react'; | |
import { mixin } from '../../../startup/client/mixins/mixin.jsx'; | |
export class Example extends mixin( React.Component, 'errorMixins' ) { | |
render () { | |
return ( <div> | |
example | |
</div> ); | |
} | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { Meteor } from 'meteor/meteor'; | |
import { createContainer } from 'meteor/react-meteor-data'; | |
import React from 'react'; | |
import { mixin } from '../../../startup/client/mixins/mixin.jsx'; | |
const example = new Mongo.Collection( 'example' ); | |
const ExampleContainer = createContainer( () => { | |
const subscribe = Meteor.subscribe('example'); | |
const loading = subscribe.ready(); | |
return { | |
loading : loading, | |
list : example.find().fetch() | |
}; | |
}, React.Component ); | |
export class Example extends mixin( ExampleContainer, 'errorMixins' ) { | |
constructor( props ) { | |
super(props); | |
} | |
render() { | |
if( this.data.loading ) { | |
return( | |
<div> | |
{ this.data.list.map( ( doc, i ) => { | |
return <div key={ i }>{ doc.name }</div> | |
})} | |
</div> | |
) | |
} else{ | |
return <div>loading...</div> | |
} | |
} | |
} | |
Example.PropTypes = { | |
}; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from 'react'; | |
import { SaveMixins } from './SaveMixins'; | |
import { ErrorMixins } from './ErrorMixins'; | |
const _mixins = { SaveMixins, ErrorMixins }; | |
export const mixin = ( component, ...mixins ) => class extends component { | |
constructor() { | |
super(); | |
mixins.forEach( ( mixin ) => { | |
for ( let func in _mixins[ mixin ] ) { | |
this[ func ] = this[ func ] || _mixins[ mixin ][ func ].bind( this ); | |
} | |
} ); | |
} | |
}; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
export const SaveMixins = { | |
hello() { | |
console.log('hello'); | |
} | |
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment