对同一类型的多个元素使用一个存储区

Question

我可以重写itemsstore，以便它将其数据存储在mapid->storedata中，但这意味着每个itemsstore方法还需要传递另一个参数storeid。getItems()变成getItems(storeId)，getItem(itemId)变成getItem(storeId,itemId)，看起来太难看了。操作还需要传递storeID。

据我所知，另一种方法是创建一个存储库，它将管理itemsstore的数据，并调用store_update操作来重新初始化它。

这种方法的问题是，如果我们有两个（A和B)ItemsContainer，并且活动容器是A，因此ItemsStore包含在A中呈现的项，容器B仍然会监听ItemsStore的更改。如果检查是itemscontainer.onchange方法中的活动容器，我可以添加检查，但我不确定应该这样做。

Answer 1

如果您可以在这里添加组件，这样我们就可以看到您是如何组织它们的，这将是有帮助的。话虽如此，我还是要尝试一下我将如何构建这个结构。

如果我要制作一个React/Flux应用程序，该应用程序有多个包含项目的列表，每个列表都有单独的项目，我将执行如下操作：

顶级控制器-视图组件：ItemsApp的子组件：ItemsList的子组件：ItemsList：Items

render: function() {
   var red = "red";
   var blue = "blue";

     return (
        <div>
          <ItemsList items={this.state.listofItems} category={red} />
          <ItemsList items={this.state.listofItems} category={blue} />
        </div>
     )
 }

render: function() {
     var category = this.props.category;
     var itemsToRender = this.props.items.filter(function(item) {
        return (
             item.category = category
        )
     });

     return (
          <div>
            <Items items={itemsToRender}/>
          </div>
     )
  }

然后，在Items组件中：

render: function() {
     var displayedItems = this.props.items.map(function(item) {
        return (
               <li className={item.category}>{item.name}</li>
        )
      });

     return (
         <ul>
          {displayedItems}
         </ul>
     )
   }

根据您希望如何构造代码，您还可以在新筛选的列表中的ItemsList中使用map，为每个项返回一些JSX，传递项的名称和类别，然后item组件只会呈现

{this.props.name}

或任何您希望的标记。

希望这能有所帮助。