15

我从这里复制了一个两年前的要点。它现在正在使用 Figwheel 并使用更新版本的 Reagent/React。我正在寻找一种通用方法来隔离来自 Javascript 控制台的此警告消息：Warning: Every element in a seq should have a unique :key. 这个想法是将:key具有生成的唯一值的 a 放入所有组件中。然后消息应该会消失，我将能够查看哪些组件需要 unique :key。我的问题是，即使:key所有这些都放入了唯一的，但仍然可以看到警告消息。

那么 - 有人能告诉我我错过了哪个组件或者我做错了什么吗？正如您从源代码（永久链接）中看到的那样，我已添加:key (gen-key)到这两个组件中：分别在第 43 行和第 68 行[:polyline {:key (gen-key) ...。[:svg {:key (gen-key) ...

编辑所以这就是答案（永久链接），无论如何就代码而言。只需查找第^{:key (gen-key)}44 行和第 60 行的位置。

请注意，该函数gen-key是为调试而设计的。替换的自然键。

这就是你可能实现的方式gen-key：

(defn gen-key []
  (gensym "key-"))

这是上面链接中完成的方式：

(def uniqkey (atom 0))
(defn gen-key []
  (let [res (swap! uniqkey inc)]
    (u/log res)
    res))
4

2 回答 2

20

来自 试剂项目网站的示例

(defn lister [items]
  [:ul
   (for [item items]
     ^{:key item} [:li "Item " item])])

(defn lister-user []
  [:div
   "Here is a list:"
   [lister (range 3)]])

注意：在这个简单的示例中，上面的 ^{:key item} 部分实际上并不是必需的，但是为动态生成的组件列表中的每个项目附加一个唯一的键是一种很好的做法，并且有助于 React 提高大型列表的性能。键可以作为元数据给出（如本例所示），也可以作为组件的第一个参数中的 :key 项（如果它是地图）。有关更多信息，请参阅 React 的文档。

并且关于动态子级的反应文档应该为您指明正确的方向。在高层次上，如果你有一些代码在某种循环中生成许多相似的组件，你需要在每个组件前面加上^{:key val}. 但是，由于试剂需要将东西放在向量中，因此您通常需要将循环构造的输出包装在其他一些向量中，例如[:ul]上面示例中的 the 或[:div]一般情况下的 a 。我有时会使用一种(into [:div] (for ....))构造来做到这一点。

于 2015-11-01T01:34:03.387 回答
4

我相信您需要提供 :key 作为元数据，例如

^{:key (gen-key)} [:polyline ...

我认为它只能作为组件的映射条目添加，就像你在这里做的那样：

[trending-app {:key (gen-key) :state-ref paths-ratom :comms ch}]

所以上述工作，但不是例如

[:svg {:key (gen-key)
于 2015-10-31T20:05:24.127 回答