material-ui - clojurescript + 试剂 + 试剂-材料-ui:尝试遍历列表
问题描述
所以我只用了几天的 clojurescript 和试剂,我正在尝试创建一个简单的个人网站。我使用 shadow-clj 设置项目以进行热重载。
首先,我导入了所需的材料-ui 东西:
(: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
解决方案
线索是该图标是一个试剂组件。将菜单项定义为带引号的列表会给出 Reagent'home
而不是home
. 您可以通过将菜单项定义为向量来解决该问题,而无需引用。
推荐阅读
- html - 如何防止html表单向导中的表单数据
- java - Appium:断言启动画面
- c# - 将 JSON 字符串以适当的格式写入 JSON 文件,而不使用内置方法或第三方库
- sql - VB.net,我需要用 n 级更快地从 Dbase 表中填充树视图
- flutter - 何时使用 ChangeNotifier?
- android - 无法确定任务 ':launcher_assist:compileProfileAidl' 的依赖关系
- bash - 重定向到使用 /dev/tty 的脚本
- python - 如何在python中使用re.sub通过它的unicode删除一个字符
- java - Elasticsearch:“无法获取 {IP} 的节点信息”和服务日志中的“noNodeAvailableException”
- vue.js - Vus.js 动作或全局方法