2

我正在开发一个包含许多嵌套状态和组件的大型 ReactJS 应用程序。我希望大部分组件都独立开发。考虑有两个组件：

  1. 一个通用的自动建议文本框（比如说，它建议用户）
  2. 我使用自动建议组件的表单组件

在应用程序级别，我有 UserStore、Dispatcher 和 UserActions。所以我的问题是

  1. 如果 Auto-suggest 是孤立开发的，那它如何使用 app 级别的 Dispatcher？或者组件应该有另一组 UserStore、Dispatcher 和 UserActions？
  2. 如果表单组件是独立开发的，它们将如何从自动建议组件接收数据？
4

1 回答 1

4

通过要求单独开发，您基本上要求在多个上下文中使用相同的组件。无论如何，构建它以使其能够在多个上下文中工作是一个好主意，这样您就可以在多个地方或多个应用程序中重用您的组件。

但要做到这一点，您必须将应用程序特定的所有内容作为道具传递。值得注意的是，这包括通常会调用应用程序的操作创建者的事件处理程序。

您可以通过在闭包中开发组件来伪造您的调度程序和操作创建者。您可能希望将用户数据作为道具以及您的事件处理程序传入。在真正的 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 回答