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

Question

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

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

由于在使用组件生成器时需要知道类型，所以我将组件包装在 class.

中

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 的（谢谢你详尽的回答！）建议之后，我发现第二个解决方案最优雅，并想 post 在这里为了完整性：

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)
  }
}

Answer 1

这些年来我在多态组件方面做了几次尝试，但都放弃了完美。如果我们接受微小的缺陷，那么就会有足够的，甚至是很好的解决方案：

1a) Class 围绕生成器。正是您在第一个示例中所拥有的除了一个重要区别：每种类型仅创建一个 class。如您所见（因为 React 认为组件不同），为相同类型创建一个新的 class 会导致 un-mount/re-mount，就像您做这样的事情一样：

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

如果您事先不知道类型，那也没关系，只需为您的类型创建一次 class 并将其放入 callee[=30= 的伴随对象中].这是一个小瑕疵，您需要为每种类型创建一个单例，但一切其他都保持简单。

1b) 与上面类似，只是使用函数而不是 class。每个类型创建一次（可选的每个被调用者）并重复使用。

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

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

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

顺便说一句，如果您自己创建一个 (T x T → Callback)，您可以使用一个内置的回调：https://github.com/japgolly/scalajs-react/blob/master/doc/EXTRA.md#statesnapshot（文档适用于 1.0.0-RC1+，使用是两个 classes: {Reusable,Exeternal}Var in pre-1.0 days)

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

How to use type-parameterized components with scalajs-react

scala

scala.js

scalajs-react