使用 Clojurescript 和 Reagent 进行 React HOC 包装

Question

我正在尝试重新使用 react-google-maps 中的组件并实现文档中的简单地图示例：https://tomchentw.github.io/react-google-maps/basics/simple-map

但是，我被包装 GoogleMap 组件的 withGoogleMap 高阶组件 (HOC) 阻止了。我尝试用 Reagent 调整类并按如下方式使用它们：

(def GoogleMap (adapt-react-class js/ReactGoogleMaps.GoogleMap))
(def withGoogleMap (adapt-react-class js/ReactGoogleMaps.withGoogleMap))

(defn Map [props]
  [withGoogleMap
   [GoogleMap props]])

代替以下 Javascript:

const Map = withGoogleMap(props => (
  <GoogleMap
     {... props}
  >
  </GoogleMap>
));

没有成功。（我收到以下错误 withGoogleMap(...): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.）。

Answer 1

withGoogleMap HOC is a function that should be called with the wrapped component. To implement the simple map example，还需要提供props给GoogleMap组件进行包装。这可以通过使用 adapt-react-class 使组件适应试剂，实现 CLJS 组件，并在调用 HOC 之前使用 reactify-component "converting back" 来实现。

(ns simple-map.views
  (:require [reagent.core :refer [adapt-react-class 
                                  create-element 
                                  reactify-component]]
            react-google-maps))

(defn my-google-map []
  (let [google-map (adapt-react-class react-google-maps/GoogleMap)]
    [google-map {:defaultZoom   18
                 :defaultCenter {:lat 61.4481532
                                 :lng 23.8608644}}]))

(defn MyMap [props]
  (let [m (-> my-google-map
              reactify-component
              react-google-maps/withGoogleMap
              adapt-react-class)]
    [m props]))

(defn main-panel []
  (let [container-element (create-element "div" #js{:style (clj->js {:height "768px" :width "1024px"})})
        map-element       (create-element "div" #js{:style (clj->js {:height "768px" :width "1024px"})})]
    (fn []
      [:div
       [MyMap {:containerElement container-element
               :mapElement       map-element}]])))

请注意，我使用 the experimental :npm-deps support 要求 react-google-maps。

使用 Clojurescript 和 Reagent 进行 React HOC 包装

React HOC wrapping with Clojurescript and Reagent

clojurescript

reagent