ClojureScript Reagent中如何正确引入点表示法React组件

Reagent的:>语法需要直接接收React组件引用作为参数。ClojureScript中直接写MultiSelect.Filterable不会被解析为读取MultiSelect对象的Filterable属性，反而会被编译为调用MultiSelect实例上的Filterable无参方法，自然拿不到目标嵌套组件，运行报错。

提前提取嵌套组件（最稳定，推荐） #

引入顶层MultiSelect对象后，通过CLJS JS互操作语法取出挂载在其上的Filterable组件，再用于渲染：

(ns example-app
  (:require [carbon-components-react :refer [MultiSelect]]))

;; 两种取属性写法等价，选一种即可
(def multi-select-filterable (.-Filterable MultiSelect))
;; (def multi-select-filterable (goog.object/get MultiSelect "Filterable"))

(def main []
  [:> multi-select-filterable {:id "example"}])

内联读取属性 #

不需要额外定义变量的话，可以直接在:>后内联读取属性：

(ns example-app
  (:require [carbon-components-react :refer [MultiSelect]]))

(def main []
  [:> (.-Filterable MultiSelect) {:id "example"}])

直接引入单组件文件（shadow-cljs环境适用） #

使用shadow-cljs构建时，可以直接通过组件的源码路径引入，不需要从顶层模块取属性：

(ns example-app
  (:require ["carbon-components-react/es/components/MultiSelect/Filterable" :default MultiSelectFilterable]))

(def main []
  [:> MultiSelectFilterable {:id "example"}])

注意：不同版本的carbon-components-react内部文件路径可能存在差异，如果该写法引入失败，优先使用前两种从顶层模块取属性的方案。

内容的提问来源于stack exchange，提问作者LordBertson