ReactJS/Reflux 将 mixin 转换为 ES6答案

【问题标题】：ReactJS/Reflux Converting mixins to ES6ReactJS/Reflux 将 mixin 转换为 ES6
【发布时间】：2019-12-02 17:41:50
【问题描述】：

我正在尝试将以下 Compenent 转换为 ES6，我已经修改了 Store/Action 的所有代码，我无法找到替换 mixins 并使用普通 ES6 的解决方案。

这是一个前端项目，我只是尝试使用 Reflux 将 JSON 数据解析为组件。

import React from 'react';
import Reflux from 'reflux';
import {Jumbotron} from 'react-bootstrap';
import {Button} from 'react-bootstrap';
import {Link} from 'react-router';
import PopularActions from '../Actions/DragAction';
import PopularStore from '../Stores/DragStore';
import createReactClass from 'create-react-class';

const JSONViewerReflux = createReactClass({
//this is the part that I need in ES6
  mixins: [Reflux.connect(PopularStore, 'DragStore')],

  DragStore: null,

  render() {
    const store = this.DragStore ? this.DragStore : this.state.DragStore;

    if(store) {
      return (
        <Jumbotron>
          <h2>JSON Elements</h2>
          {
            store.map(({Name, Id}) => <div>
              <h3>{Name} </h3>


            <h3>{Id}</h3>
            </div>)
          }
        </Jumbotron>
      );
    } else {
      setTimeout(PopularActions.fetchPopular, 2000);
      return <span />
    }

  }
});

export default JSONViewerReflux;

//Here is the store/action

import Reflux from 'reflux';
import $ from 'jquery';
import DragActions from '../Actions/DragAction';

const data = [];


function parseData(fetchedData) {
  console.log(fetchedData);
  const dragitemData = fetchedData.users;
  const dragitem = dragitemData.map(({name, ID}) => {
    return {
      Name: name,
      Id: ID
    };
  });

  this.dragitem = dragitem;
  this.trigger(this.dragitem);
}

const DragStore = Reflux.createStore({
  listenables: [DragActions],

  Url: 'https://api.myjson.com/bins/dvx65',

  dragitem: [],

  init() {
    this.fetchPopular();
  },

  fetchPopular() {
    const that = this;

    $.ajax({
      url: this.Url,
      method: 'GET'
    }).done(parseData.bind(this))
  }

});


export default DragStore;


import Reflux from 'reflux';

const DragAction = Reflux.createActions([
  'fetchPopular'
]);

export default DragAction;

它可以工作，但我只想在 ES6 中像项目的其余部分一样使用它，这样我就可以轻松地将 {NAME} 和 {ID} 与其他组件一起使用。

【问题讨论】：

标签： reactjs ecmascript-6 mixins refluxjs

【解决方案1】：

React.Component（ES6 及更高版本）不再支持 mixins。这个post

讨论了替代方案

【讨论】：

我认为它们在 ES6 中得到支持，我很愚蠢地在 stackoverflow 中发布它。这正是我需要的帮助。