前端之家收集整理的这篇文章主要介绍了
ES6+REACT+MIXIN,
前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
ES6+REACT+MIXIN
@H_301_4@文件结构
Action.js
Home.jsx
index.js
store.js
Home.jsx
import React from 'react'
import Reflux from 'reflux'
import ReactMixin from 'react-mixin'
import store from './store'
import Actions from './Actions'
class App extends React.Component {
constructor(props) {
super(props);
Actions.getAll();
}
render() {
var t = this;
var data = t.state.m;
return <div onClick={Actions.add.bind(this)}>
Hello World!!!<br />
{data.num}
</div>;
}
}
export default App;
ReactMixin.onClass(App,Reflux.connect(store,'m'));
store.js
import Actions from './Actions'
import Reflux from 'reflux'
export default Reflux.createStore({
listenables: [Actions],onGetAll() {
this.trigger(this.data);
},onAdd(item) {
this.data.num += 1;
this.trigger(this.data);
},onRemove(i) {
this.data.num = 0;
this.trigger(this.data);
},getInitialState() {
var t = this;
this.data = {
num:0
};
return this.data;
}
});
index.js
module.exports = require('./Home.jsx');
Action.js
import Reflux from 'reflux';
export default Reflux.createActions(['getAll','add','remove']);
@H_301_4@如果更好的方法欢迎指导
原文链接:https://www.f2er.com/react/306231.html