在 Flux 中处理同一组件的多个实例
Posted
技术标签:
【中文标题】在 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 属性:我刚刚解决了这个问题。我花了几天时间才弄明白。
一般来说,您应该将您的操作和存储设置为类,而不是可以在 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>
【讨论】:
以上是关于在 Flux 中处理同一组件的多个实例的主要内容,如果未能解决你的问题,请参考以下文章
Angular 8:如何为同一组件的多个实例提供不同的服务实例