2

多くのネストされた状態とコンポーネントを持つ大規模な ReactJS アプリを開発しています。ほとんどのコンポーネントを個別に独立して開発してほしいと思っています。次の 2 つのコンポーネントがあるとします。

  1. 一般的な自動提案テキストボックス (たとえば、ユーザーを提案します)
  2. 自動提案コンポーネントを使用するフォームコンポーネント

アプリ レベルでは、UserStore、Dispatcher、および UserActions があります。だから私の質問は

  1. Auto-suggest が単独で開発されている場合、アプリ レベルの Dispatcher をどのように使用できますか? または、コンポーネントに UserStore、Dispatcher、および UserActions の別のセットが必要ですか?
  2. 自動提案コンポーネントが独立して開発された場合、フォーム コンポーネントはどのように自動提案コンポーネントからデータを受け取りますか?
4

1 に答える 1

4

単独での開発を依頼することで、基本的には複数のコンテキストで同じコンポーネントを使用するよう依頼することになります。コンポーネントを複数の場所または複数のアプリケーションで再利用できるように、複数のコンテキストで動作できるように構築することは良い考えです。

しかし、それを行うには、アプリケーション固有のすべてを props として渡す必要があります。特に、これには通常アプリケーションのアクション クリエーターを呼び出すイベント ハンドラーが含まれます。

クロージャでコンポーネントを開発することにより、ディスパッチャとアクション クリエータを偽造できます。ユーザーデータを小道具として、またイベントハンドラーとして渡したいと思うでしょう。実際の Flux アプリでは、UserStore からデータを取得し、そのデータをコンポーネントに渡すコントローラー ビュー コンポーネントがあります。したがって、ディスパッチャ、アクション、およびコントローラ ビューはすべて、クロージャによって偽造されます。

実際のディスパッチャーとアクションを使用する代わりに、単純なことを実行してクロージャー内の状態を更新します。したがって、開発ベンチは次のようになります。

var React = require('react');
var AutoSuggest = require('AutoSuggest');

var container = document.getElementById('development-container');

var users = [
  { id: '1', name: 'Joey' },
  { id: '2', name: 'Johnny' },
  { id: '3', name: 'Dee Dee' },
  { id: '4', name: 'Tommy' }
];

var onKeyDown = function() { 
  // do stuff with users
  render(container);
}

var render = function(container) {
  React.renderComponent(
    <AutoSuggest
       users={users}
       onKeyDown={onKeyDown}
    />,
    container
  );
};
render(container);

そして、実際の本番コードは次のようになります。

var React = require('react');
var AutoSuggest = require('AutoSuggest');
var UserStore = require('UserStore');
var UserActions = require('UserActions');

function onKeyDown(e) {
  UserActions.doSomething(e.value);
}

var SomeControllerView = React.createClass({

  getInitialState: function() {
    return {
      users: UserStore.getAll();
    };
  },

  componentWillMount: function() {
    UserStore.addListener('change', this.onChange.bind(this));
  },

  render: function() {
    return (
      <AutoSuggest 
        users={this.state.users}
        onKeyDown={onKeyDown} 
      />
    );
  },

  componentWillUnmount: function() {
    UserStore.removeListener('change', this.onChange);
  },

  onChange: function() {
    this.setState({ 
      users: UserStore.getAll() 
    });
  }    

});

module.exports = SomeControllerView;
于 2014-09-15T16:49:22.207 に答える