在Flux中处理同一组件的多个实例
Handling multiple instances of the same component in Flux
以Flux TodoMVC为例,假设我想让两个Todo应用程序相邻。
class TwoTodos extends React.Component {
render () {
return (
<div>
<TodoApp />
<TodoApp />
</div>
);
}
}
现在,当您运行这个示例时,您会注意到两个Todo列表将同步,因为两者都发出和侦听相同的操作。
防止这种情况的规范方法是什么?
我刚刚解决了这个问题。我花了几天时间才弄明白。
通常,您应该将操作和存储设置为类,而不是可以在Todo组件之间共享的普通对象。然后在每个Todo组件中创建一个操作类和存储类的实例。
为了避免组件相互影响,您需要将可以由不同组件实例共享的公共变量(如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;
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>
相关文章:
- KnockoutJS-组件-多个实例
- 如何在另一个组件中获取指令/组件实例
- 在Flux中处理同一组件的多个实例
- Aurelia组件在其他视图模型中使用时不共享实例
- 通过“;类“"实例”;使用ReactJS组件代替“props”文字
- 处理Twitter Flight组件的多个实例的事件
- 当有多个 React.js 组件实例具有数据请求时如何处理缓存
- 比较两个组件 - 组件 X 是组件 A 的实例吗?
- ExtJs - 如何在使用多个实例时设置组件的 ID
- Emberjs-1.0 将控制器实例传递给 ember 组件
- ES6+React组件实例方法
- Vue JS-呈现多个组件实例
- 不同组件上的单个或多个存储实例
- 是否可以在React组件实例化后添加一个关键属性
- 如何更新表示相同数据的两个不同React组件实例
- 如何在Reactjs中创建组件实例
- 像OO编程一样,将组件作为实例进行反应
- 处理多个组件实例的回调
- vue组件和vue实例之间的通信
- Vue.js "选项应该是一个在组件定义中返回每个实例值的函数