Закрытие по локальному состоянию в функциях жизненного цикла Om.Next

Я хотел бы сделать нечто похожее на компоненты Reagent form-3, которые позволят мне определить некоторые общие (статические) переменные для использования в функциях жизненного цикла.

В основном мой вопрос заключается в том, как мне построить что-то эквивалентное let в приведенном ниже фрагменте кода реагента? Я не могу понять, как сделать это правильно, используя Ом defui макро.

Простым примером будет создание внутреннего идентификатора, к которому я могу получить доступ во всех функциях жизненного цикла конкретного экземпляра моего компонента через 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

2 ответа

Решение

Через некоторое время копания я обнаружил, что решение представляет собой комбинацию использования реакции initLocalState метод жизненного цикла и om.next/get-state как намекнуло в ответ Криса.

Общая схема становится следующей:

(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/set-state!, om.next/update-state! а также om.next/get-state для записи, изменения и чтения из локального состояния компонента.

Тем не менее, компонент local state является плохим родственником приложения app. Чтобы использовать состояние приложения, дайте defui компонент идентификатор и просто составляют ключевое слово, которое является частью запроса компонента. Затем настройте чтение и изменение мультиметодов, которые соответствуют ключевому слову, которое вы изобрели.

Примечание: если вы используете Fulcro, а не Om Next, вам не понадобится метод чтения.

Другие вопросы по тегам