阵营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。