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

标签 javascript reactjs reactjs-flux flux

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

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

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

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

最佳答案

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

一般来说,你应该让你的 Action 和存储成为类,而不是可以在 Todo 组件之间共享的普通对象。然后在每个 Todo Component 中创建 action 类和 store 类的实例。

为了避免组件之间相互影响,您需要将不同组件实例可以共享的公共(public)变量(如TodoStore.js中的_todos)封装到您的商店类中。

然后你需要将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;

应用程序.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>

关于javascript - 在 Flux 中处理同一组件的多个实例,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29170956/

相关文章:

javascript - 如何在数据库中存储 CryptoJS 加密密码

ReactJS:具有嵌套组件的大型应用程序

javascript - 正则表达式复杂模式

php - Jquery 自动增长与另一个文本区域

javascript - react : Update child with parent state change

javascript - 将数组传递给 React 中的组件属性

javascript - 如何使用 Flux/ReactJS 减少 Controller View 中的渲染调用

javascript - 是否有 React/Flux 样板项目或生成器?

javascript - 顶级脚本 block 执行了两次?

reactjs - React PureComponent 中的 shouldComponentUpdate 实现