clojurescript + reagent + reagent-material-ui：尝试遍历列表

Question

所以我只使用了几天的 clojurescript 和试剂，我正在尝试创建一个简单的个人网站。我使用 shadow-clj 设置项目以进行热重载。

首先我导入了 required material-ui stuff:

(:require [reagent-material-ui.icons.home :refer [home]]
          [reagent-material-ui.icons.apps :refer [apps]]
          [reagent-material-ui.core.list :refer [list]]
          [reagent-material-ui.core.list-item :refer [list-item]]
          [reagent-material-ui.core.list-item-icon :refer [list-item-icon]]
          [reagent-material-ui.core-list-item-text :refer [list-item-text]])

然后我在导航栏中定义了我想要的项目：

(def menu-items '({:list-icon [home] :list-text "Home"}
                  {:list-icon [apps] :list-text "Portfolio"}))

然后我尝试遍历 menu-items 并将它们放入试剂组件中：

(defn navbar []
  [list
    (map (fn [item]
           [list-item
             [list-item-icon (:list-icon item)]
             [list-item-text (:list-text item)]])
         menu-items)])

现在，当我重新加载代码时，只显示来自 :list-text 的文本，但没有图标。我已经尝试在没有任何循环的情况下显示图标并且效果很好。

控制台没有错误输出只有两个警告：

Warning: Every element in a seq should have a unique :key: ([#object[reagent.impl.template.NativeWrapper] [#object[reagent.impl.template.NativeWrapper] [home]] [#object[reagent.impl.template.NativeWrapper] "Home"]] [#object[reagent.impl.template.NativeWrapper] [#object[reagent.impl.template.NativeWrapper] [apps]] [#object[reagent.impl.template.NativeWrapper] "Portfolio"]] 
 (in webapp.core.page >  > webapp.components.index.home >  > webapp.components.navbar.navbar)

和

Warning: componentWillMount has been renamed, and is not recommended for use. See https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html for details.

* Move code with side effects to componentDidMount, and set initial state in the constructor.
* Rename componentWillMount to UNSAFE_componentWillMount to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.

Please update the following components: webapp.components.index.home, webapp.components.navbar.navbar, webapp.core.page

Answer 1

线索是图标是一个试剂组件。将菜单项定义为带引号的列表会给出 Reagent 'home 而不是 home。您可以通过将菜单项定义为矢量而不用引号来解决该问题。

clojurescript + reagent + reagent-material-ui：尝试遍历列表

clojurescript + reagent + reagent-material-ui: Trying to loop through list

clojurescript

reagent

material-ui