1

我已经看到了几种在 中制作外观或包装 Javascript 组件的方法scala.js，包括为 s 这样做react.js Component。他们似乎在封装或隐藏组件本身提供的功能的程度上有所不同，我想根据他们的需要（也许他们只需要调用一种方法）。

在我的例子中，我需要使用一个名为的组件react-sticky，我首先尝试确定如何继续为它的两个组件类之一制作外观，StickyContainer这里提供的代码。

我的问题如下：

  1. 如何处理中的staticJavascript 方法scala？我什至需要关心这个，或者我可以不知道吗？
  2. 我需要做的最少“component门面”数量Props是多少？componentrender()
  3. 与任何其他原生类相比，包装或外观组件有什么根本不同？reactjsjs

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

@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: _*)
}
4

2 回答 2

1

如何处理 scala 中的静态 Javascript 方法？我什至需要关心这个，或者我可以不知道吗？

当你想包装它时，你不需要担心 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

为了在另一个组件的 render() 中包含没有任何 Props 的组件，我需要做的最小“外观”数量是多少？

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 :_*) 
   }
}

与任何其他 js 原生类相比，包装或外观 reactjs 组件有什么根本不同？

如果你看到object ReactSticky extends js.Object ...写门面没有区别。但是在反应世界ReactElement中，您需要的是需要额外包装器的地方React.createElement(classCtor,props,children)。

于 2016-05-02T09:59:13.843 回答
0

invariant支持有关如何使基于 SRI 的组件正常工作的正确答案。其他japgolly基于的在处理第三方 JS 时不那么友好。

以下是我如何让该库react-mt-svg-lines（一个动画库）工作：

克拉兹

case class MtSvgLines(
                      key: js.UndefOr[String] = js.undefined,
                      ref: js.UndefOr[String] = js.undefined,
                      animate: js.Any = true,
                      duration: Double = 10.0,
                      stagger: js.UndefOr[Double] = js.undefined,
                      timing: js.UndefOr[String] = js.undefined,
                      playback: js.UndefOr[String] = js.undefined,
                      fade: js.UndefOr[String] = js.undefined
                    )
{

  def apply(children: ReactNode*): ReactComponentU_ = {
    val props = JSMacro[MtSvgLines](this)
    val f = React.asInstanceOf[js.Dynamic].createFactory(js.Dynamic.global.SvgLines.default)
    if (children.isEmpty)
      f(props).asInstanceOf[ReactComponentU_]
    else if (children.size == 1)
      f(props, children.head).asInstanceOf[ReactComponentU_]
    else
      f(props, children.toJsArray).asInstanceOf[ReactComponentU_]
  }

}

值得注意的是，请确保其中的论点createFactory是global.Whatever你export要的。考虑到孩子们在数字上的差异。用于js.UndefOr每个可选。

客户端

def render(S: State, C: PropsChildren) = {
  <.header(^.key := UUID.randomUUID().toString, Styles.Header_TextIsCentered, Styles.Header_BackgroundIsGrayBlue_WithWhiteText)(
    <.div(^.className := "container")(
      <.h1()("justin shin, tampa fl"),
      MtSvgLines(animate = true, duration = 500) {
        import japgolly.scalajs.react.vdom.svg.all._

        svg(SvgStyles.svg,
          defs(
            maskTag(id := "mask", x := "0", y := "0", width := "100%", height := "100%",
              rect(id := "alpha", x := "0", y := "0", width := "100%", height := "100%"),
              text(id := "title", x := "50%",y := "0", dy := "1.58em")("Justin", transform := "translate(50, 0)"),
              text(id := "title", x := "50%",y := "0", dy := "1.58em")("Tampa")
            )
          ),
          rect(id := "base", x := "0", y := "0", width := "100%", height := "100%"),
          path(stroke := "green", strokeWidth := "10", fill := "none", d := "M20.8,51c0,0,20.8,18.2,21.5,18.2c0.6,0,33.3-38.5,33.3-38.5"),

        )
      }
    )
  )
}
于 2016-05-03T01:37:23.567 回答