导入原生 React 组件

Question

我正在尝试在我的朗姆酒应用程序中使用来自 React Bootstrap 的 React 组件。

在我的宏命名空间中，我有一些代码 found on the rum gitter :

(defn ->kebab [s]
  (str/join "-" (map str/lower-case (re-seq #"\w[a-z]+" s))))


(defn gen-wrapper [component]
  `(defmacro ~(symbol (->kebab (str component))) [& args#]
     (let [[opts# & [children#]] (if (-> args# first map?)
                                   [(first args#) (rest args#)]
                                   [nil args#])]
       `(js/React.createElement
         ~(symbol "js" (str "window.ReactBootstrap." (name '~component)))
         (cljs.core/clj->js ~opts#)
         ~@children#))))


(def components '[Button
                  ])

(defmacro gen-wrappers []
  `(do
     ~@(clojure.core/map gen-wrapper components)))

然后在我的 devcard 命名空间中我有：

(pm/gen-wrappers)

(rum/defc foo []
  [:div (button nil "bggg")])

(defcard foo "" (foo))

错误是：

react.inc.js:18342 Uncaught Error: Invariant Violation: Objects are not valid as a React child (found: js/React.createElement). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of foo.

Answer 1

这原来是 clojurescript 宏的问题。请注意，宏 gen-wrappers 本身扩展为一系列宏——在本例中为 button 宏。但是在 clojurescript 中，你不能调用 defined in the same compilation stage 的宏，不幸的是，我试图通过立即调用 button 来做到这一点。

解决方案是将 gen-wrappers 调用与其他宏一起移动到宏文件中：

(defmacro gen-wrappers []
  `(do
     ~@(clojure.core/map gen-wrapper components)))

(gen-wrappers)

然后从我的 devcard 命名空间调用完全限定的 pm/button。

(rum/defc foo []
  [:div (pm/button nil "bggg")])

"But wait!"你说。 “你是不是犯了同样的错误，从定义它的同一编译阶段调用一个宏（gen-wrappers）？实际上不是，因为在 clojurescript 中，宏是在 clojure[=26= 中定义的] 文件，其中该限制不适用。

导入原生 React 组件

Importing a native React Component

clojurescript

reactjs