导入原生 React 组件答案

【问题标题】：Importing a native React Component导入原生 React 组件
【发布时间】：2016-12-21 20:38:06
【问题描述】：

我正在尝试在我的朗姆酒应用中使用来自 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 未捕获错误：不变违规：对象是作为 React 子级无效（找到：js/React.createElement）。如果你意味着渲染一组孩子，使用数组代替或包装使用 React 附加组件中的 createFragment(object) 的对象。查看 foo的渲染方法。

【问题讨论】：

标签： reactjs clojurescript

【解决方案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")])

“但是等等！”你说。 “你是不是犯了同样的错误，从定义它的同一编译阶段调用一个宏（gen-wrappers）？实际上没有，因为在 clojurescript 中，宏是在 clojure 文件中定义的，在不适用该限制的情况下。

【讨论】：