ClojureScript：如何使用 Reagent 反應性地更改 CodeMirror

Question

我正在嘗試在我的網頁中嵌入 CodeMirror 以編輯多個代碼片段，一次一個。

為此，我：

• 有一個包含代碼片段映射的 Reagent atom node-defs-atom 。
• 有另一個原子node-history-atom ，其中包含正在查看的片段的鍵
• 將 CodeMirror 的值設置為 key 處的代碼映射值。

這是不起作用的：

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

                            ...... )))

使用reset!更改node-history-atom reset! 不對 CodeMirror 中的文本做任何事情。 我真的不確定出了什么問題。

如果有人能告訴我應該在哪里引用(@node-defs-atom (last @node-history-atom))我將不勝感激。

提前致謝！

Answer 1

您可以嘗試其他方式來處理CodeMirror編輯器

• 在空節點上創建CM實例

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

• 然后你的視圖將是一個試劑類， wrapper-id只是父類的id

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

• 創建一個將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)))) 

Answer 2

如果您想要更詳細的答案，此要點可能會有所幫助： https : //gist.github.com/jaredly/3d227a0275a66dcfb1f3