gpt4 book ai didi

scala - 如何在 scalajs-react 中使用类型参数化组件

转载 作者:行者123 更新时间:2023-12-04 03:12:54 27 4
gpt4 key购买 nike

我将 scalajs 0.6.15 与 scalajs-react 0.11.3 和 reactjs 15.4.2 一起使用。

考虑一个组件 SomeComp,其中 Props 的值类型需要参数化。

由于在使用组件构建器时需要知道类型,所以我将组件包装在一个类中。

class SomeComp[T]() {
case class Props(t: T, onChange: T => Callback)

val component = ReactComponentB[Props]("SomeComp")...

def apply(t: T, onChange:T => Callback) = component(Props(t, onChange))
}

这行得通。问题是,组件会随着父级的每次重新渲染而重新安装,除非 SomeComp 的用户首先创建 SomeComp 的实例并在父级的 中使用该实例>render 方法。

我避免这种情况的 hack 解决方案是:

object SomeComp {
val genericComp = SomeComp[Any]()

def apply[T](t: T, onChange: T => Callback) = genericComp(
t = t,
onChange = (a: Any) => onChange(a.asInstanceOf[T])
)
}

有没有更好的、更少的样板代码、更简单的方法?有什么建议吗?


更新在@Golly 的(谢谢你详尽的回答!)建议之后,我发现第二个解决方案最优雅,为了完整起见,我想把它贴在这里:

object SomeComp {
trait Props{
type T
val t: T
val onChange: T => Callback
}

// use Props#T if you need to reference T
val component = ReactComponentB[Props]("SomeComp")...

def apply[_T](_t: _T, _onChange: _T => Callback) = {
val props = new Props {
type T = _T
val t = _t
val onChange = _onChange
}
component(props)
}
}

最佳答案

多年来,我在多态组件方面进行了几次尝试,但已经放弃了完美。如果我们接受微小的缺陷,那么就会有足够的,甚至是很好的解决方案:

1a) 围绕构建器的类。正是您在第一个示例中所拥有的除了一个重要区别:每种类型只创建一个类。如您所见,为相同类型创建新类会导致卸载/重新安装(因为 React 认为组件不同),就像您做这样的事情一样:

final class SomeComp[A] private[SomeComp] () {
val component = ReactComponentB[Props]("SomeComp")...
}
object SomeComp {
val Int = new SomeComp[Int]
val String = new SomeComp[String]
}

如果您事先不知道类型,也没关系,只需为您的类型创建一次类并将其放入被调用者 的伴生对象中。这是一个小瑕疵,您需要为每种类型创建一个单例,但一切其他都保持简单。

1b) 与上面类似,除了使用函数而不是类。为每个类型(可选地为每个被调用者)创建一次并重复使用。

2) 我不推荐这样做,但你可以使用存在类型而不是通用类型,特别是使类型参数成为类型成员。

class Props {
type T
val value: T
val onChange: T => Callback
}

现在组件是单态的,但您需要一些样板文件来很好地创建和使用 Props 类。

顺便说一句,如果您自己创建一个 (T x T → Callback),您可以使用一个内置的回调:https://github.com/japgolly/scalajs-react/blob/master/doc/EXTRA.md#statesnapshot (doc 是针对 1.0.0-RC1+ 的,在 pre-1.0 days 中曾经是两个类:{Reusable,Exeternal}Var)

关于scala - 如何在 scalajs-react 中使用类型参数化组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43559344/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com