加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

ES6+REACT+MIXIN

发布时间:2020-12-15 03:24:45 所属栏目:百科 来源:网络整理
导读: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 Re

ES6+REACT+MIXIN

文件结构

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']);

如果更好的方法欢迎指导

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读