在 Flux 中处理同一组件的多个实例

Posted 2023-02-22

【中文标题】在 Flux 中处理同一组件的多个实例

【英文标题】：Handling multiple instances of the same component in Flux

【发布时间】：2015-05-24 02:58:03

【问题描述】：

举个例子Flux TodoMVC 并假设我想要两个 Todo-Apps 并排放置。

class TwoTodos extends React.Component 
  render () 
    return (
      <div>
        <TodoApp />
        <TodoApp />
      </div>
    );
  

现在，当您运行此示例时，您会注意到两个待办事项列表 将同步为发出和收听相同的操作。

防止这种情况的规范方法是什么？

【问题讨论】：

它按预期工作。您需要更改设计……例如，商店需要更多关于数据源的信息（例如与每个实例关联的标识符）。

不确定我在说什么……但值得一试。向 TodoApp 元素添加 key 属性：

您可以像@WiredPrairie 提到的那样传递一个appID，然后将数据结构嵌套在该appID 下的商店中，或者您可以使用商店和调度程序实例并根据需要传递这些实例——向上您认为这对您的应用程序最有效。使用实例方法，任何调用动作创建者的组件都需要对调度程序的引用，并将调度程序传递给动作创建者。

【参考方案1】：

我刚刚解决了这个问题。我花了几天时间才弄明白。

一般来说，您应该将您的操作和存储设置为类，而不是可以在 Todo 组件之间共享的普通对象。然后在每个 Todo 组件中创建动作类和存储类的实例。

为避免组件相互影响，您需要将可以被不同组件实例共享的公共变量（如 TodoStore.js 中的 _todos）封装到您的 store 类中。

然后你需要将app.js中渲染的内容包装成一个类，并在使用前创建这个类的实例。

我将把关键更改放在下面的代码中。

TodoActions.js：

var Actions = function()
    //if you have any shared variables, just define them here, instead of outside of the class 

    this.getAction = function()
        return TodoActions;
     
    var TodoActions = ...;
    ...

module.exports = Actions;

TodoStore.js：

//private functions
function create(text, todos)...
function update(id, updates, todos)...

var Store = function()
    var _todos = ;
    this.getStore = function()
        return TodoStore;
       

    var TodoStore = assign(, EventEmitter.prototype, ...);
;
module.exports = Store;

TodoApp.react.js：

var TodoApp = React.createClass(
    Store: function(),
    Actions: function(),
    componentWillMount: function()
        var store = require('path/to/TodoStore.js');
        var storeInstance = new store();
        this.Store = storeInstance.getStore();  

        var action = require('path/to/TodoActions.js');
        var actionInstance = new action();
        this.Store = actionInstance .getAction();  

        this.Store.addChangeListener(...);
    
    //If you need to call methods in Actions, just call this.Actions.<method_name>
);    
module.exports = TodoApp;

app.js：

var TodoApp = require('./components/TodoApp.react');
window.Todo = function()
    var todo = null; //In case you need to get/set the component
    this.use = function(elementId)
        todo = ReactDom.render(
            <TodoApp />,
            document.getElementById(elementId)
        )
    
;

index.html:

<section id="todoapp1"></section>
<section id="todoapp2"></section>
<script>
    var todo1 = new Todo();
    var todo2 = new Todo();
    todo1.use('todoapp1');
    todo2.use('todoapp2');
</script>