为什么组件-did-安装不是工作试剂？

Question

我有以下几点：

(def load-map (with-meta identity {:component-did-mount e/load-map}))

(defn my-component []
    [load-map
   [:div {:id "map"}]
   ]

)

其中，e/load-map为：

(defn load-map []
    (loadMap)
)

其中loadMap函数是从js文件导入的：

export function loadMap() {
    console.log("creating script tag on dom");
    // Create the script tag, set the appropriate attributes
    var script = document.createElement('script');
    script.src = 'https://maps.googleapis.com/maps/api/js?key=AIzaSyDoJwW4_MfQzY&callback=initMap';
    script.defer = true;
    script.async = true;

    // Attach your callback function to the `window` object
    window.initMap = function() {
        console.log("init map");
        console.log("Element is ", document.getElementById("map") )
        map = new google.maps.Map(document.getElementById("map"), {
            center: { lat: -34.397, lng: 150.644 },
            zoom: 8
        });
    };

    // Append the 'script' element to 'head'
    document.head.appendChild(script);

}

控制台日志打印，但地图不显示。另一方面，在index.html中放置一个<div id="map"></div>，并使用以下reitit路由在页面加载时触发e/ load -map事件

["/"
     {:name        :my-component
      :view        #'my-component
      :controllers [{:start e/load-map}]}]

很管用。

Answer 1

先决条件

参考Reagent documentation，我们可以看到：

render函数是组件的主干和必需部分

这正是您的load-map组件所缺少的，也是它不会呈现任何内容的原因。

查看相同的文档，我们可以看到达成一致的命名法指定了在Reagent中定义组件的three main ways

1. Form 1：返回一个简单的Hiccup vector.
2. Form 2：返回一个函数返回一个Hiccup vector.
3. Form 3：返回一个带有生命周期方法的类。

代码

my-component使用Form 1样式，而load-map是一个Form 3组件。因此，load-map应该返回一个类和一个:reagent-render键。

结果会是这样的：

(defn my-component []
      (reagent.core/create-class
        {:component-did-mount
          e/load-map
         :reagent-render
          (fn []
             [:div {:id "map"}])}))

请注意这两个组件的组合。在功能上没有必要将它们分开。但是如果你一定要把它们分开，为load-map组件添加相同的类定义，并且在:reagent-render键上有一个虚拟的(fn [] [:<>]) (Reagent version of React fragment)。