ClojureScript：Reagentを使ってCodeMirrorを反応的に変更する方法

Question

私は、WebページにCodeMirrorを埋め込み、複数のコードスニペットを1つずつ編集しようとしています。このI行うに

：

• は、コードスニペットのマップを含む1個の試薬原子node-defs-atomを持っています。
• もう1つのアトムを持つnode-history-atomスニペットのキーが含まれています。
• キーのコードマップの値にCodeMirrorの値を設定します。

は、ここでは動作しません何：CodeMirror内のテキストに何もしないreset!とnode-history-atomを変更

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

• fuを作成する

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