Clojurescript 语义 UI React Search 自定义渲染器

Question

我正在尝试使用 reagent/re-frame 和 semantic-ui 在 Clojurescript 中实现搜索。 Semantic-ui 使用渲染器来提供建议。此渲染器默认为图像、价格、标题、描述。因为我想获得有关地理编码的建议，所以我想列出地址。这是我得到的 return 数据。我基本上想在建议中显示名称、城市和邮政编码。

{:hits
 [{:osm_type "W",
   :name "Am Pfuhl",
   :osm_value "residential",
   :city "Berlin",
   :postcode "12209",
   :state "Berlin",
   :osm_key "highway",
   :extent [13.322584 52.4205878 13.3258975 52.419743],
   :point {:lng 13.3241429, :lat 52.4201622},
   :osm_id 103012039,
   :country "Deutschland"}
 :took 7}

我写的代码没有显示任何结果。我尝试了很多，但我不知道如何查看组件以查看它的状态是否发生变化以及它是否存储结果。当我直接调用它时，订阅确实会返回结果。

(def search (helper/component "Search"))
(def grid (helper/component "Grid"))
(def grid-row (helper/component "Grid" "Row"))

(defn on-search-change [event props]
  (rf/dispatch [:get-geocode (:value (js->clj props :keywordize-keys true))]))

(defn on-result-select [event props]
  (rf/dispatch [:geocode-selected]))

(defn get-geocode-results []
  @(rf/subscribe [:geocode-results]))

(defn result-renderer [& meh]
  (fn [meh]
    [:div (str meh)]))

(defn geocode-component []
  [:> grid
   [:> grid-row
    [:> search {:minCharacters 3
                :loading (when (:geocode @(rf/subscribe [:loading])) )
                :defaultValue "Berlin"
                :selectFirstResult true
                :onSearchChange on-search-change
                :onResultSelect on-result-select
                :resultRenderer result-renderer
                :results get-geocode-results}]]])

非常感谢您在以下方面的帮助：如何确定组件是否正确存储结果？如何编写只渲染所有结果以进行调试的渲染器？

感谢和问候！蒂莫

编辑：https://gist.github.com/TimoKramer/7e93758afb81dcad985fafccc613153a

上的解决方案

Answer 1

从文档看来，:resultRenderer 需要一个 React 组件，而您要给它一个 Clojure 函数。您可以使用 reagent.core/as-component.

将 hiccup-style 组件转换为 React 组件

我还没有测试过这个，但也许它可以像这样简单：

(defn result-renderer [& meh]
  (reagent.core/as-component [:div (str meh)]))

我对工具提示使用了类似的策略：

(defn info-icon
  ([message]
   (info-icon {} message))

  ([options message]
   (let [popup (component "Popup")
         icon  (component "Icon")]
     [:> popup
      {:trigger (reagent/as-component [:> icon (merge {:name "info"} options)])}
      " "
      message])))

其中 component 可能与您的 helper/component 匹配，而 reagent 是 reagent.core

Clojurescript 语义 UI React Search 自定义渲染器

Clojurescript Semantic UI React Search custom renderer

semantic-ui

clojurescript

reagent

re-frame