ClojureScript：如何使用 Reagent 响应式地更改 CodeMirror

Question

我正在尝试在我的网页中嵌入 CodeMirror 以编辑多个代码片段，一次一个。

为此我：

有一个 Reagent atom node-defs-atom 包含代码片段的映射。
有另一个原子 node-history-atom，其中包含正在查看的片段的键
将CodeMirror的值设置为key处code map的值

以下是无效的：

(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编辑器

在空节点上创建CM实例

(def cm (atom nil))

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

那么你的视图将是一个试剂 class 而 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))))

ClojureScript：如何使用 Reagent 响应式地更改 CodeMirror

ClojureScript: how to change CodeMirror reactively with Reagent

reactjs

clojurescript

codemirror

reagent