我怎样才能对 Reflex Dynamic 中的值进行分支?

How can I branch on the value inside a Reflex Dynamic?

在最简单的情况下,假设我有一个 Dynamic t Bool,当值为 true 时,我希望存在一个空的 div,当值为 false 时,我不存在不想有任何 dom 元素。

更一般地说,如果我有一个 Dynamic t (Either MyA MyB),并且我有知道如何呈现给定 Dynamic t MyADynamic t MyB 的函数,我该如何调用适当的函数渲染?

如果您需要切换小部件,您可能需要以下之一:

dyn :: MonadWidget t m => Dynamic t (m a) -> m (Event t a) Source

widgetHold :: MonadWidget t m => m a -> Event t (m a) -> m (Dynamic t a)

既然你提到你手头有 Dynamic,我们将使用 dyn:

app = do
  switched <- button "Alternate!"
  flag <- foldDyn ($) False (not <$ switched) -- just to have some Dynamic t Bool
  let w = myWidget <$> flag
  void $ dyn w

myWidget :: MonadWidget t m => Bool -> m ()
myWidget False = blank
myWidget True = el "div" $ blank

基本规则是,由于 Reflex 的高阶性质,如果您想换出某些东西,您需要 Event/Dynamic 产生一个小部件作为值。这就是为什么 dynDynamic t (m a) 作为其参数(适当地,widgetHold 采用 Event t (m a)。这就是为什么我们映射 Dynamic t Bool 以获得动态将我们的小部件构建操作作为一个值。

值得一提的是,dynamic/widgetHold 都没有虚拟 dom/diffing 来加速渲染。通过反射,您可以更明确地了解更新内容(Dynamic/Event t Text 可以直接影响节点文本,而无需重新渲染整个节点),您应该利用它。否则,页面的大部分将被交换,并且会产生显着的性能损失。