1

我正在尝试在重新构建应用程序中使用 AWS Amplify 身份验证库。该库提供了一个更高阶的组件withAuthenticator，它应该包装您的应用程序的主视图。我正在尝试使用reactify-component，adapt-react-class但不幸的是我收到以下错误：

未捕获的类型错误：无法构造“HTMLElement”：请使用“新”运算符，此 DOM 对象构造函数不能作为函数调用。

(defn main-panel []
  [:div
   [:h1 "Hello" ]])

(def root-view
  (reagent/adapt-react-class
    (withAuthenticator
      (reagent/reactify-component main-panel))))

(defn ^:dev/after-load mount-root []
  (re-frame/clear-subscription-cache!)
  (aws-config/configure)
  (re-frame/dispatch-sync [::events/initialize-db])
  (reagent/render [root-view]
                  (.getElementById js/document "app")))

任何帮助表示赞赏

4

1 回答 1

0

我在使用试剂 + 放大时遇到了这个问题。

通过 2 处更改解决了它，但我不确定是否需要两者

#1 将 google 闭包编译器的输出更改为 es6（或更高版本）。Amplify 似乎使用了无法填充的 es6 功能。

这适用于 shadow-cljs (shadow-cljs.edn)，但这也应该适用于其他构建系统。
{:builds {:app {:compiler-options {:output-feature-set :es6}}}}

免责声明：我从 lein-cljsbuild 切换到 shadow-cljs，因为我无法让 lein-cljsbuild 尊重 es6 输出的配置。

#2 使用功能组件。

在试剂 1.0.0-alpha1 及更高版本中，您可以更改编译器以默认生成功能组件。

(ns core
    (:require
      [reagent.core :as r]))


(def functional-compiler (r/create-compiler {:function-components true}))
(r/set-default-compiler! functional-compiler)

还有其他方法可以制作功能组件。如果您不喜欢或不能使用这种方法，请查看文档。

于 2020-09-02T12:00:36.197 回答