ClojureScript：如何更改CodeMirror与试剂反应

Question

我试图在我的网页中嵌入一个CodeMirror来编辑几个代码片段，一次一个。

为此I：

• 有一个试剂原子node-defs-atom包含地图上的代码片段。
• 有另一个原子node-history-atom其中包含正在查看的片段的键
• 将CodeMirror的值设置为密钥中的代码映射的值。

这里是行不通：

(defn editor [node-defs-atom node-history-atom] 
    (reagent/create-class 
    {:reagent-render (fn [] (do [:textarea 
        { :value (@node-defs-atom (last @node-history-atom)) 
         :auto-complete "off"}])) 
    :component-did-mount (editor-did-mount node-defs-atom node-history-atom) 
    })) 

(defn editor-did-mount [node-defs-atom node-history-atom] 
    (fn [this] 
    (let [codemirror (.fromTextArea js/CodeMirror 
            (reagent/dom-node this) 
            #js {:mode "clojure" 
              :lineNumbers true})] 

          ......))) 

更改node-history-atom与reset!没有做任何事情在CodeMirror文本。我真的不确定发生了什么问题。

如果有人可以告诉我应该在哪里提及(@node-defs-atom (last @node-history-atom))，我会非常感激。

提前致谢！

Answer 1

你可以尝试另一种方式来处理CodeMirror编辑

• 空节点

  (def cm (atom nil)) 
  
  (reset! cm (js/CodeMirror. 
        (.createElement js/document "div") 
        (clj->js {...}))) 
  

• 上创建一个CM实例，然后你的看法将是一个试剂类wrapper-id只是父母的一个ID

  (reagent/create-class 
      {:reagent-render   (fn [] @cm [:div {:id wrapper-id}]) 
      :component-did-update update-comp 
      :component-did-mount update-comp}) 
  

• 创建一个福nction其中追加CM到DOM节点

  (defn update-comp [this] 
      (when @cm 
      (when-let [node (or (js/document.getElementById wrapper-id) 
           (reagent/dom-node this))] 
       (.appendChild node (.getWrapperElement @cm))))