Antizer 开源项目使用常见问题解答-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_01076/article/details/144551330

Antizer 开源项目使用常见问题解答

antizer ClojureScript library for Ant Design React UI components 项目地址: https://gitcode.com/gh_mirrors/an/antizer

项目基础介绍

Antizer 是一个为 ClojureScript 编写的库，它提供了一套用于 Reagent 和 Rum 的 Ant Design React 组件实现。Ant Design 是一套企业级的 UI 设计语言和基于 React 的实现，具有以下特点：

企业级的 Web 应用 UI 设计语言。
一套高质量的 React 组件，开箱即用。
提供广泛的 API 文档和示例。

该项目的代码托管在 GitHub 上，并且是开源的，遵循 EPL-1.0 许可证。

主要的编程语言

Antizer 项目主要使用以下编程语言和技术栈：

ClojureScript: 基于 Clojure 语言的编译器，将 Clojure 代码编译成 JavaScript 代码，运行在浏览器端。
Reagent/Rum: React 的 ClojureScript 包装库，用于构建 React 组件。
Ant Design: React 组件库，由 Antizer 在 ClojureScript 环境中提供接口。

新手使用该项目时需特别注意的3个问题及解决步骤

问题一：如何添加 Antizer 依赖到项目中？

解决步骤：

在项目的 project.clj 文件中添加依赖项 [antizer "0.3.3"]。
根据您所使用的 React 库，您还需要添加对应的 ClojureScript React 库依赖，例如使用 Reagent，则添加 [reagent "X.Y.Z"]，使用 Rum，则添加 [rum "X.Y.Z"]。
在您的 HTML 页面中包含相应的 Ant Design CSS 样式表。您可以通过 CDN 或者使用 Ring 库的 wrap-resource 函数从类路径加载 CSS 文件。

问题二：如何确保 CSS 文件正确加载？

解决步骤：

在 HTML 页面中通过 CDN 引入 CSS 文件，例如：
```
<link rel="stylesheet" href="***">
```
将 antd_version_number 替换为与 Antizer 链接版本相同的 Ant Design 版本号。

或者，您可以使用 Ring 的 wrap-resource 函数来包含 CSS 文件：

(ns your-project
  (:require [ring.adapter.jetty :as jetty]))

(defn wrap-antd-css [handler]
  (-> handler
      (wrap-resource "antd" {:path "antd.min.css"})))

问题三：如何使用 Antizer 实现一个简单的组件？

解决步骤：

引入 Antizer 和 Reagent/Rum 的命名空间：

(ns your-app
  (:require [antizer.reagent :as ant]
            [reagent.core :as r]))

或者使用 Rum：

(ns your-app
  (:require [antizer.rum :as ant]
            [rum.core :as rum]))

创建一个使用 Antizer 组件的函数：

使用 Reagent 示例：

(defn click-me []
  [ant/button {:on-click #(ant/message-info "Hello Reagent")} "Click me"])

(defn init []
  (r/render [click-me] (.-body js/document)))

使用 Rum 示例：

(defn click-me []
  (ant/button {:on-click #(ant/message-info "Hello Rum")} "Click me"))

(defn init []
  (rum/mount (click-me) (.-body js/document)))