React emballage HOC avec Clojurescript et réactif

Question

J'essaie de réutiliser les composants de react-google-maps et mettre en œuvre l'exemple simple carte de la doc: https://tomchentw.github.io/react-google-maps/basics/simple-map

Cependant, je suis bloqué par le withGoogleMap ordre supérieur des composants (HOC) qui enveloppe le composant GoogleMap. Je l'ai essayé d'adapter les classes avec le réactif et les utiliser comme suit:

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

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

au lieu du code JavaScript suivant:

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

Sans succès. (J'obtiens l'erreur suivante withGoogleMap(...): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.).

Answer 1

Le withGoogleMap HOC is a function qui doit être appelé avec le composant encapsulé. Pour implémenter le simple map example, vous devez également fournir des accessoires au composant GoogleMap à encapsuler. Cela peut être réalisé en adaptant le composant au réactif avec adapt-react-class, en implémentant le composant CLJS et en "reconvertissant" avec reactify-component avant d'appeler le HOC.

(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}]]))) 

Notez que j'utilise the experimental :npm-deps support d'exiger react-google-maps.