Question

我们说我有两个控制器视图 - ItemsContainer，Item和一个商店ItemsStore，它存储了商品列表。当项目列表因某些操作而发生更改时，商店会发出更改，并且两个视图都会从ItemsStore获取其状态。

ItemsContainer调用getItems并重新呈现项目列表。 Item使用其ID调用getItem方法，然后重新渲染。

现在，让我在屏幕上显示多个ItemsContainer的最简单方法是什么？

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

据我所知，

Another way正在创建一个商店，用于管理ItemsStore的数据，并重新初始化，调用STORE_UPDATE行动。

这个方法的问题是，如果我们有两个（A和B）ItemsContainer＆＃39;并且活动容器是A，那么ItemsStore包含呈现的项目A，容器B仍会听取ItemsStore更改。我可以在ItemsContainer.onChange方法中添加检查它是否为活动容器，但我不确定应该采用的方式。

Answer 1

如果您可以在此处添加组件，那么我们就可以了解您如何组织它们。话虽这么说，但我还是会考虑如何构建它。

如果我要制作一个包含多个包含项目的列表的react / flux应用程序，每个列表都包含单独的项目我会做这样的事情：

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

ItemsApp将是从商店中检索状态的组件。在商店中，我将有一个listOfItems，它是一个对象数组，每个对象代表一个单独的项目，名称为＆＃34;＆＃34;和＆＃34;类别＆＃34;。让我们说一些项目的类别为＆＃34; red＆＃34;和其他人＆＃34;蓝＆＃34;。

因此，itemsApp从商店获取它的状态，并将所有项目传递给各个ItemsList组件，如下所示：

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>
     )
 }

然后，每个ItemsList将获取项目列表并过滤它以仅查找与其传递的类别匹配的项目，如下所示：

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组件将除了渲染<li className={this.props.category}>{this.props.name}</li>或任何你想要的标记之外什么都不做。

希望这有帮助。

将一个商店用于同一类型的多个元素

1 个答案: