Reagent React Clojurescript警告:seq中的每个元素都应该有一个唯一的:key

前端之家收集整理的这篇文章主要介绍了Reagent React Clojurescript警告:seq中的每个元素都应该有一个唯一的:key前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我从 here复制了一个两年前的要点.它现在正在使用Figwheel并使用更新版本的Reagent / React.
我正在寻找一种隔离来自Javascript控制台的警告消息的通用方法:警告:seq中的每个元素都应该具有唯一的:key.我们的想法是将带有生成的唯一值的:key放入所有组件中.然后消息应该消失,我将能够看到哪些组件需要唯一的:密钥.我的问题是,即使将一个唯一的:密钥放入所有密钥中,仍会看到警告消息.

所以 – 有人能够告诉我我错过了哪个组件或者我做错了什么?从source (permalink)可以看出,我已经添加了:key(gen-key)到两个组件:[:polyline {:key(gen-key)…和[:svg {:key(gen-key)..分别在第43和68行.

编辑因此无论如何这是answer (permalink).只需在第44和60行查找^ {:key(gen-key)}的位置.

注意,函数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))
Reagent Project site的例子
(defn lister [items]
  [:ul
   (for [item items]
     ^{:key item} [:li "Item " item])])

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

Note: The ^{:key item} part above isn’t really necessary in this
simple example,but attaching a unique key to every item in a
dynamically generated list of components is good practice,and helps
React to improve performance for large lists. The key can be given
either (as in this example) as Meta-data,or as a :key item in the
first argument to a component (if it is a map). See React’s
documentation for more info.

关于有活力的孩子的react documentation应该指出你正确的方向.在较高的层次上,如果你有一些代码在某种循环中生成许多类似的组件,你需要在每个组件前面加上^ {:key val}.但是,由于试剂需要在向量中进行操作,因此通常需要将循环结构的输出包装在其他向量中,例如上例中的[:ul]或一般情况下的[:div].我有时会使用(into [:div](for ….))类型的构造来执行此操作.

猜你在找的React相关文章