1

でファサードを作成したり、Javascript コンポーネントをラップしたりするいくつかの方法を見scala.jsてきましたreact.js Component。コンポーネント自体によって提供される機能をカプセル化または非表示にする程度はさまざまであるように思われますが、ニーズに基づいていると思います (おそらく、1 つのメソッドを呼び出すだけでよいでしょう)。

私の場合、 と呼ばれるコンポーネントを使用する必要があり、react-sticky最初に、ここで提供されている 2 つのコンポーネント クラスのうちの 1 つのファサードを作成する方法を決定しようとしていStickyContainerます。

私の質問は次のとおりです。

  1. staticでJavascript メソッドを処理するにはどうすればよいscalaですか? 私はこれを気にする必要さえありますか、それとも私はそれについて不可知論者になることができますか?
  2. を他の のなしに含めるために必要な「ファサード」の最小量は何ですか?componentPropscomponentrender()
  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追加のラッパー for -call が必要な場所が必要React.createElement(classCtor,props,children)です。

于 2016-05-02T09:59:13.843 に答える
0

SRIinvariantベースのコンポーネントを機能させる方法についての正しい答えを支持します。他の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_]
  }

}

特に、引数 increateFactoryがglobal.Whateveryou exportto であることを確認してください。子供の数の差異を考慮します。すべてのオプションに使用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 に答える