我设置了Scalajs / Diode / React系统,在一个部分中,我遇到了一些让我难过的行为(缺乏)行为。我的印象是当你通过如下所示的行将React组件连接到二极管状态时:
val ChangeClassButton = SelectCircuit.connect(_.selection)(p => DiodeChangeClassButton(p))
只要在二极管电路中更新selection
,ChangeClassButton就应该重新渲染。
我已经验证了二极管事件调度和状态更新似乎按预期工作,但connect
更改后,selection
中的React组件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("")
}
}
在我这里调用updated()
时,连接到_.selection的预期React组件是否错误重新渲染?我对二极管和反应都很新,所以在可能的情况下我可能会误解。
感谢您的帮助。