javascript - 以尽可能最封装的方式包装/外观 ScalaJS React js 组件(react-sticky)

Question

我见过几种在 scala.js 中制作外观或包装 Javascript 组件的方法，包括对 react.js 组件 这样做。我认为它们封装或隐藏组件本身提供的功能的程度似乎有所不同(也许它们只需要调用一种方法)。

就我而言，我需要使用一个名为 react-sticky 的组件，我首先尝试确定如何继续为其两个组件类之一创建外观，StickyContainer, code provided here.

我的问题如下:

1. 如何处理 scala 中的静态 Javascript 方法？我是否需要关心这个，或者我可以对此不可知吗？
2. 要在另一个 中仅包含 组件 而无需任何 Props，我需要制作的最小数量的“外观”是多少组件的render()？
3. 与任何其他 js 原生类相比，包装或外观 reactjs 组件有什么根本不同？

最后，以下哪种策略最合适？

@js.native
trait StickyContainer extends js.Object { ... }
object StickyContainer extends StickyContainer {}

或

case class StickyContainer(offset: js.UndefOr[Double],...) {
    def apply() = { React.createElement(ReactUniversal.Image, JSMacro[StickyContainer](this), children: _*)
}

Answer 1

How do I deal with static Javascript methods in scala? Do I even need to care about this, or can I be agnostic about it?

当你想要包装它时，你不需要担心 react 组件的底层实现。但一般来说，如果您想为类指定静态字段

 @ScalaJSDefined
 class MyComponent extends ReactComponent {
  ...
}

val ctor = js.constructorOf[MyComponent]

ctor.childContextTypes = js.Dictionary("contextfield" -> React.PropTypes.`object`.isRequired)

如果您想知道 scala.js 中开箱即用的静态字段支持.. https://github.com/scala-js/scala-js/issues/1902

What is the minimum amount of "facade" I need to make to just include the component without any Props in another component's render()?

global.ReactSticky = require('react-sticky') // load js lib

@js.native
object ReactSticky extends js.Object {
  val StickyContainer : js.Dynamic = js.native
  val Sticky : js.Dynamic = js.native
}

//Using JSMacro
case class StickyContainer(fields ..) {
  def apply(children : ReactNode*) = {
     val props  = JSMacro[StickyContainer](this)
     React.createElement(ReactSticky.StickyContainer,props,children :_*) 
   }
}

//Using FunctionMacro
def StickyContainer(fields ..)(children : ReactNode*) : ReactElement = {
     val props  = FunctionMacro()
     React.createElement(ReactSticky.StickyContainer,props,children :_*) 
   }
}

What is fundamentally different about wrapping or facading a reactjs component as opposed to any other js native class?

如果你看到object ReactSticky extends js.Object ...，那么编写门面没有什么区别。但在 react 世界中，您需要 ReactElement 这就是您需要额外包装器的地方 - React.createElement(classCtor,props,children) 调用..