Question

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

但是，我被包裹withGoogleMap组件的GoogleMap高阶组件（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。要实现simple map example，您还需要为要包装的t(combn(x = names(vars), m = 4))组件提供道具。这可以通过使用GoogleMap调整组分到试剂，实现CLJS组分，以及＆＃34;转换回＆＃34;来实现。在致电HOC之前使用adapt-react-class。

reactify-component

请注意，我使用the experimental :npm-deps support来(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}]])))。

用Clojurescript和Reagent反应HOC包装

1 个答案: