1

编辑：我是一个使用过时版本的二极管的傻瓜。升级到 1.0 版本解决了这个问题。

我设置了一个 Scalajs/Diode/React 系统，在一个部分中，我遇到了一些让我难过的（缺乏）行为。我的印象是，当您通过如下线将 React 组件连接到 Diode 状态时：

val ChangeClassButton = SelectCircuit.connect(_.selection)(p => DiodeChangeClassButton(p))

selection每当在二极管电路中更新时，ChangeClassButton 都应该重新渲染。

我已经验证了 Diode 事件调度和状态更新似乎按预期工作，但是当更改时，connect编入的 React 组件selection不会重新渲染。selection附加到电路状态其他部分的其他组件在相关状态更改时按预期重新渲染。

这是应该重新渲染的 React 组件：

val DiodeChangeClassButton = ReactComponentB[ModelProxy[String]]("SaveButton")
    .render_P { case proxy =>
      println("Rendering ChangeClassButton and selection is: " + proxy.value)
      if(proxy.value != "")
        <.div(
          ^.cursor := "pointer",
          ^.onClick --> proxy.dispatch(ChangeClass(proxy.value)),
          "String is: " + proxy.value
        )
      else
        <.div()
  }.build
  val ChangeClassButton = SelectCircuit.connect(_.selection)(p => DiodeChangeClassButton(p))

这是调度发生变化的二极管动作的组件selection：

val DiodeClassificationBox = ReactComponentB[ModelProxy[Pot[PaperInfoShort]]]("ClassBox")
    .render_P { case proxy =>
      println("ClassificationBox is rendering")
      <.div(
        TitleBar("Classification"),
        ReadOnlyInputBar(proxy.value.get.mrPrim),
        <.div(
          ^.onMouseUp --> proxy.dispatch(HighlightChange),
          ReadOnlyInputBar((for(s <- proxy.value.get.secondaries) yield s.classCode).mkString(" "))
        )
      )
  }.build
  val ClassificationBox = SelectCircuit.connect(_.paperInfo)(p => DiodeClassificationBox(p))

这是 SelectCircuit 中的动作处理程序：

class HighlightHandler[M](modelRW: ModelRW[M, String]) extends ActionHandler(modelRW)
{
    override def handle =
      {
        case InitSelection =>
          updated("")
        case HighlightChange =>
          if (checkClasses(dom.window.getSelection().toString))
            updated(dom.window.getSelection().toString)
          else
            updated("")
      }
}

连接到 _.selection 以updated()在此处调用时重新渲染的预期 React 组件我错了吗？我对 Diode 和 React 还很陌生，所以我可能会误解在什么情况下会发生这种情况。

谢谢你的帮助。

4

0 回答 0