陣營HOC包裝與Clojurescript和試劑

Question

我試圖從react-google-maps重複使用的組件和從文檔實現簡單的地圖例子：https://tomchentw.github.io/react-google-maps/basics/simple-map

但是，我是一個封鎖的withGoogleMap高次成分（HOC）包裝GoogleMap組件。我試圖類與試劑改編並運用這些如下：代替以下的Javascript

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

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

：

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應該用包裝組件調用。要實施simple map example，還需要提供要包裝的GoogleMap組件的道具。這可以通過使用adapt-react-class實現CLJS組件，並在調用HOC之前用reactify-component「轉換回」來使組件適應試劑。

(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。