【问题标题】:Closing over local state in Om.Next lifecycle functions在 Om.Next 生命周期函数中关闭本地状态
【发布时间】:2017-11-09 15:25:23
【问题描述】:

我想做一些类似于 Reagent form-3 组件的事情,这使我能够定义一些共享(静态)变量以在生命周期函数中使用。

基本上我的问题是如何在下面的试剂代码 sn-p 中构造与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

【问题讨论】:

    标签: clojurescript om-next


    【解决方案1】:

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

    然而,组件本地状态是应用状态的可怜表亲。要使用应用程序状态,请给您的 defui 组件一个 ident 并简单地组成一个关键字,该关键字是组件查询的一部分。然后设置 read 和 mutate 在您发明的关键字上调度的多方法。

    附带说明 - 如果您使用的是 Fulcro 而不是 Om Next,则不需要 read 多方法。

    【讨论】:

    • 我可能使用了错误的术语,但我不是在寻找修改组件状态的方法。我想在实例化时对组件进行一次参数化。 Om 的状态相关函数会触发重新渲染等,这不是我想要的。在 OP 中的 Reagent 示例中,my-component 的每个实例化都将具有不同的 id,但 id 将在每个实例化的所有生命周期函数中可用。将这些东西置于应用程序状态似乎对我正在尝试做的事情来说有点过头了,但也许我的心态还不完全正确......
    • 您是说某些生命周期函数无法访问组件本地状态吗?我没有提到的另一个选项是一个方便的全局状态部分,称为“链接”,它与任何特定组件无关,但可以从所有人轻松访问。任何查询都会触发渲染(包括这些链接),但这确实是学术性的。
    • 非常感谢您的意见,您帮我找到了解决方案!
    【解决方案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 中的方法更冗长,但我对此很好,因为它提供了等效的功能。我一直都在使用它,所以有点惊讶我在其他地方找不到任何关于这个的讨论。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2013-02-06
      • 1970-01-01
      • 1970-01-01
      • 2011-06-17
      • 1970-01-01
      • 1970-01-01
      • 2022-01-05
      • 2012-03-16
      相关资源
      最近更新 更多