ES6+REACT+MIXIN

来源:互联网 发布:淘宝好吃的点心店铺 编辑:程序博客网 时间:2024/05/21 22:38

ES6+REACT+MIXIN

文件结构

Action.jsHome.jsxindex.jsstore.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']);

如果更好的方法欢迎指导

0 0