Question

我正在Bootstrap React包裹Japgolly ScalaJS React，并提出以下内容：

case class NavItem(
   onClick: UndefOr[js.Function1[ReactEvent, Boolean]] = undefined,
   // ...
) { /* ... create method here */ }

object NavItem {
   def toPage[T](page: T, children: ReactNode*)(implicit ctl: RouterCtl[_ >: T]) = {
     val clickFunction: js.Function1[ReactEvent, Boolean] = { e: ReactEvent =>
       e.preventDefault()
       ctl.set(page).runNow()
       true
     }

     NavItem(
       key = page.toString,
       href = ctl.pathFor(page).value,
       onClick = clickFunction
     ).create(
       children
     )
   }
}

这很有效，但我感觉比实际情况更复杂。

我的第一个想法是使用onClick : UndefOr[ReactEvent => Callback]，而这似乎更符合日本的ScalaJS React常规方法，所以我尝试了：

val clickEvent: ReactEvent => Callback = e => {
  e.preventDefault()
  ctl.set(page)
}

这会编译，但即使调试显示调用了回调，页面也永远不会切换。为什么在这种情况下页面永远不会切换？

有关如何正确执行NavItem的任何建议，该NavItem显示单击链接时的链接，但使用路由器实际路由？什么是惯用的方式？

Answer 1

您不需要onClick处理程序 - 只需删除它，它应该按预期工作。使用router.pathFor填充的href足以进行路由。

ScalaJS使用路由器为包装组件实现onClick处理程序

1 个答案: