reactjs - ClojureScript:如何使用 Reagent react 性地更改 CodeMirror

Question

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

为此，我:

• 拥有一个包含代码片段图的试剂原子 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})]

                            ...... )))

使用 reset! 更改 node-history-atom 不会对 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 {...})))
  

• 那么你的 View 将是一个试剂类，而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))))