Javascript 回流-在同一视图中执行多个操作

我对使用

reactjs

&

reflow

非常陌生，我不知道如何实现下一种情况：

我有一个带有一些选项卡的视图，每个选项卡都有来自API的不同数据。到目前为止，我所做的是以下代码：

我的组成部分：

import React from 'react';
import Reflux from 'reflux';
import SocialStore from '../stores/socialStore';
import Card from './shared/card.js'


var Social = React.createClass({
  mixins: [Reflux.connect(SocialStore, 'socialstore')],

  render: function() {
    if(this.state.socialstore){
      var tempSocialStore = this.state.socialstore
    }else{
      var tempSocialStore = [];
    }

    return <div className="android-be-together-section">
        <div className="mdl-layout mdl-js-layout mdl-layout--fixed-header">
          <header className="mdl-layout__header">
            <div className="mdl-layout__header-row">
              <span className="mdl-layout-title">Portfolio</span>
            </div>
            <div className="mdl-layout__tab-bar mdl-js-ripple-effect">
              <a href="#scroll-tab-1" className="mdl-layout__tab is-active">Stackoverflow</a>
              <a href="#scroll-tab-2" className="mdl-layout__tab">GitHub</a>
              <a href="#scroll-tab-3" className="mdl-layout__tab">Twitter</a>
              <a href="#scroll-tab-4" className="mdl-layout__tab">Instagram</a>
            </div>
          </header>
          <main className="mdl-layout__content">
            <section className="mdl-layout__tab-panel is-active" id="scroll-tab-1">
              <div className="page-content">
                <div className="content">
                  {
                    tempSocialStore.map(function (item){
                      return  <Card title={item.title_description} description={item.summary_description} btnTitle="View" link={item.id_description} />
                    })
                  }
                </div>
              </div>
            </section>
            <section className="mdl-layout__tab-panel" id="scroll-tab-2">
              <div className="page-content">content 2</div>
            </section>
            <section className="mdl-layout__tab-panel" id="scroll-tab-3">
              <div className="page-content">content 3</div>
            </section>
            <section className="mdl-layout__tab-panel" id="scroll-tab-4">
              <div className="page-content">content 4</div>
            </section>
          </main>
        </div>
    </div>
  }
});

export default Social;

商店：

import Reflux from 'reflux';
import $ from 'jquery';
import SocialActions from '../actions/SocialActions';

var SocialStore = Reflux.createStore({
  listenables: [SocialActions],
  stackoverflowList: [],
  twitterList: [],
  instagramList: [],
  githubList: [],
  sourceUrlStackoverflow: 'url-1',
  sourceUrlTwitter: 'url-2',
  sourceUrlInstagram: 'url-3',
  sourceUrlGithub: 'url-4',

  init: function(){
      this.getStackoverflowFeed(); //First Tab
  },

  getTwitter: function(){
    $.ajax({
          url: this.sourceUrlTwitter,
          type: 'GET',
          cache: false,
          context: this,
          success: function(data) {
            this.twitterList = data.results;
            this.trigger(this.twitterList);
          },
          error: function(){
            console.log('There was an error while your request');
          }
      });
  },

  getInstagram: function(){
    $.ajax({
          url: this.sourceUrlInstagram,
          type: 'GET',
          cache: false,
          context: this,
          success: function(data) {
            this.instagramList = data.results;
            this.trigger(this.instagramList);
          },
          error: function(){
            console.log('There was an error while your request');
          }
      });
  },

  getGithub: function(){
    $.ajax({
          url: this.sourceUrlGithub,
          type: 'GET',
          cache: false,
          context: this,
          success: function(data) {
            this.githubList = data.results;
            this.trigger(this.githubList);
          },
          error: function(){
            console.log('There was an error while your request');
          }
      });
  },

  getStackoverflowFeed: function(){
    $.ajax({
          url: this.sourceUrlStackoverflow,
          type: 'GET',
          cache: false,
          context: this,
          success: function(data) {
            this.stackoverflowList = data.results; //TODO: Remove comments from the list.
            this.trigger(this.stackoverflowList);
          },
          error: function(){
            console.log('There was an error while your request');
          }
      });
  }
});

export default SocialStore;

因此，yo enter第一次使用第一个选项卡是因为我在

init

中实例化了它，但我不知道当用户单击并填充内容时如何在每个选项卡中设置

状态

知道怎么做吗

谢谢
 在这里，您可以做一些事情来更好地利用回流模式：


SocialStore
应负责存储当前选中选项卡的
状态
，并且
Social
组件应针对该
状态
进行呈现
每次选择选项卡或更改选择时，都应该有一个事件侦听器，即
onSelectionChange
onSelectionChange
应触发并调用相应的
Action
，
SocialStore
将监听并更改当前选中选项卡的
状态

然后，您的
Social
组件将侦听
SocialStore
更改并更新其组件状态，该状态将再次触发
render（）
，您的视图将正确反映所选内容
通过查看每个社交
动作
和
商店
的相似程度以及它们的实现方式。我强烈建议您将所有
操作分解为一个单独的操作，但需要一个参数来指示选择了哪个选项卡。这同样适用于分解
Store
中
get{Social}
函数的处理。（此步骤是可选的，但会产生更干净、更易于维护的代码）

您是否有进一步的问题？如果你的问题已经解决，那么你应该将帮助解决问题的答案标记为已接受。这有助于其他有同样问题的人。快乐编码：）
import Reflux from 'reflux';
import $ from 'jquery';
import SocialActions from '../actions/SocialActions';

var SocialStore = Reflux.createStore({
  listenables: [SocialActions],
  stackoverflowList: [],
  twitterList: [],
  instagramList: [],
  githubList: [],
  sourceUrlStackoverflow: 'url-1',
  sourceUrlTwitter: 'url-2',
  sourceUrlInstagram: 'url-3',
  sourceUrlGithub: 'url-4',

  init: function(){
      this.getStackoverflowFeed(); //First Tab
  },

  getTwitter: function(){
    $.ajax({
          url: this.sourceUrlTwitter,
          type: 'GET',
          cache: false,
          context: this,
          success: function(data) {
            this.twitterList = data.results;
            this.trigger(this.twitterList);
          },
          error: function(){
            console.log('There was an error while your request');
          }
      });
  },

  getInstagram: function(){
    $.ajax({
          url: this.sourceUrlInstagram,
          type: 'GET',
          cache: false,
          context: this,
          success: function(data) {
            this.instagramList = data.results;
            this.trigger(this.instagramList);
          },
          error: function(){
            console.log('There was an error while your request');
          }
      });
  },

  getGithub: function(){
    $.ajax({
          url: this.sourceUrlGithub,
          type: 'GET',
          cache: false,
          context: this,
          success: function(data) {
            this.githubList = data.results;
            this.trigger(this.githubList);
          },
          error: function(){
            console.log('There was an error while your request');
          }
      });
  },

  getStackoverflowFeed: function(){
    $.ajax({
          url: this.sourceUrlStackoverflow,
          type: 'GET',
          cache: false,
          context: this,
          success: function(data) {
            this.stackoverflowList = data.results; //TODO: Remove comments from the list.
            this.trigger(this.stackoverflowList);
          },
          error: function(){
            console.log('There was an error while your request');
          }
      });
  }
});

export default SocialStore;