Question

我使用reactjs＆amp; reflux我不知道如何实施下一个情况：

我有一些标签视图，每个标签都会有来自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';

let SocialActions = Reflux.createActions([
  'getStackoverflowFeed',
  'getTwitter',
  'getGithub',
  'getInstagram'
]);

export default SocialActions;

商店：

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;

所以你第一次输入正在使用第一个标签，因为我已经在init中实例化了它，但我不知道当用户点击时如何在每个标签中设置state他们并填写内容。

任何想法怎么做？

谢谢！

Answer 1

你可以在这里做很多事情来更好地利用回流模式：

SocialStore应负责存储当前选中哪个标签的state，Social组件应针对该state呈现。
每次选择标签或更改选择时，您都应该有一个事件监听器，即onSelectionChange。 onSelectionChange应该启动并拨打相应的Action SocialStore将会收听，并更改当前所选标签的state。
然后，您的Social组件会收听SocialStore更改并更新其组件状态，render()会再次触发，您的视图会正确反映所选内容
通过查看每个社交Action和Store的相似程度以及它们如何实施。我强烈建议您将所有Actions分解为一个，但需要一个参数来指示选择了哪个选项卡。同样可以解决get{Social}中Store函数的处理问题。（此步骤是可选的，但会产生更清晰，更易于维护的代码）

回流 - 同一视图中的倍数操作

1 个答案: