Question

我想做一些类似于Reagent form-3组件的东西，这使我能够定义一些在生命周期函数中使用的共享（静态）变量。

基本上我的问题是如何在下面的试剂代码片段中构建与let相当的东西？我似乎无法弄清楚如何使用Om的defui宏正确地做到这一点。

一个简单的例子是生成一个内部id，我可以通过gdom/getElement在我的组件的特定实例的所有生命周期函数中访问。

(defn my-component
  [x y z]  
  (let [id (gensym "my-component-")]  ;; <-- how to do this in Om?
     (reagent/create-class                 
       {:component-did-mount (...)
        :component-will-mount (...)          
        :reagent-render
         (fn [x y z] (js/console.log id)))) ;; <-- id is available

Answer 1

您可以使用om.next/set-state!，om.next/update-state!和om.next/get-state来编写，更改和读取组件本地状态。

然而，组件本地状态是应用状态的表兄弟。要使用应用状态，请为您的defui组件提供 ident ，并简单地组成一个属于组件查询的关键字。然后设置读取并改变派生您发明的关键字的多方法。

作为旁注 - 如果您使用的是Fulcro而不是Om Next，则不需要读取多方法。

Answer 2

经过一段时间的挖掘后，我发现解决方案是使用react的initLocalState生命周期方法和om.next/get-state的组合，在Chris的回答中暗示了这一点。

概要如下：

(defui MyComponent
    Object
    (initLocalState [this] {:id (gensym "") ...}) ; <-- the key
    (render [this]
     (let [id (om/get-state this :id)] ...))
    (componentDidmount [this]
     (let [id (om/get-state this :id)] ...))
    ...

这种方法比Reagent更冗长，但我很好，因为它提供了相同的功能。我一直都在使用这个，所以有点惊讶我在其他地方找不到任何关于它的讨论。

在Om.Next生命周期函数

2 个答案: