我正在尝试在我的网页中嵌入 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))
的引用,我将非常感激。
提前致谢!
最佳答案
您可以尝试另一种方式来处理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))))
关于reactjs - ClojureScript:如何使用 Reagent react 性地更改 CodeMirror,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38255446/