2

私の問題もここにあります: https://gist.github.com/somanythings/8c3d34de754af311d7826ea837d160b4

japgolly の scalajs-react ( https://github.com/japgoly/scalajs-react ) ライブラリで scalajs を使用する場合。グリドルグリッドをラップしようとしています http://griddlegriddle.github.io/Griddle/customization.html カスタム列が必要です。そのためには、コンポーネントを含む columnMetadata 構造を渡す必要があります。

そうすれば、scalaj で定義されたプロパティを持たないコンポーネントをレンダリングできますが、renderP を介してプロパティにアクセスしようとしたり、renderS を介してスコープを設定しようとすると、それらは両方とも render 関数のスコープ内で未定義になります。ブラウザーでデバッグすると、それらの名前はバインドされており、期待される値を持っています。

私が壊れるとき

def renderP(f: (DuringCallbackU[P, S, B], P) => ReactElement): Out =
  render($ => f($, $.props))

その後$.propsは未定義です

私は何が欠けていますか？ReactComponentB ディスパッチでの単純な入力の問題ですか。それは何らかの形でhttps://github.com/japgoly/scalajs-react/issues/157に関連していますか?

// Confusion over how to pass a scalajs defined component to a javascript defined component

object GriddleComponentWrapper {
  // for customComponent I've tried js.Any, ReactComponentU 
  @ScalaJSDefined
  class ColumnMeta(val columnName: String, val order: Int, val customComponent: ReactClass=null) extends js.Object
}

case class GriddleComponentWrapper(results: js.Any, //Seq[Map[String, Any]],
                                   columns: Seq[String],
                                   columnMeta: Option[Seq[ColumnMeta]] = None,
                                   showSettings: Boolean = true,
                                   showFilter: Boolean = true
                                  ) {
  def toJS = {
    val p = js.Dynamic.literal()
    p.updateDynamic("results")(results)
    p.updateDynamic("columns")(columns)
    p.updateDynamic("showSettings")(showSettings)
    p.updateDynamic("showFilter")(showFilter)

    (columnMeta).foreach { case cm => p.updateDynamic("columnMetadata")(cm.toJsArray) }

    p
  }

  def apply(children: ReactNode*) = {
    val f = React.asInstanceOf[js.Dynamic].createFactory(js.Dynamic.global.Bundle.griddle) // access real js component , make sure you wrap with createFactory (this is needed from 0.13 onwards)
    f(toJS, children.toJsArray).asInstanceOf[ReactComponentU_]
  }

}

object MyTestGrid {

  @js.native
  class ColumnMetaProps(val data: js.Object, val rowData: js.Object, val metadata: js.Object) extends js.Object

  // I've tried making the Props argument js.Dynamic, and also the ColumnMetaProps above
  @JSExport
  val testComp = ReactComponentB[js.Dynamic]("Mine").renderP(
    (sc, props: js.Dynamic) => {
      //when debugging this in the browser, 'sc' and 'props' have inspectable object values with the expected members in the browser 
      //dev tools, BUT, they're undefined 
      log.info(s"what is ${sc.props}")
      log.info(s"what is $props")
      val string: Frag = if (!js.isUndefined(props)) props.data.toString() else "nothing!"
      <.h1(string)
    }).build

   @JSExport 
   val aCompletelyStaticComponentWithNoPropsWillWork = ReactComponentB[js.Dynamic]("MyStaticComponent").renderP(
    (sc, props: js.Dynamic) =>  <.h1("this renders!!") ).build


// am I passing the right thing to columnmeta with testComp.reactClass? 
 val columnMeta = (new ColumnMeta("c1", 1, testComp.reactClass) :: Nil).toJsArray

  val results = Seq(
    js.Dynamic.literal("c1" -> "row1c1", "c2" -> "row1c2"),
    ).toJsArray

  val component = ReactComponentB[js.Dynamic]("MyTestGrid")
    .render_P {
      props =>
        GriddleComponentWrapper(results, columns = "c1" :: "c2" :: Nil, columnMeta = Some(columnMeta))()
    }.build

  def apply() = component
}
4

1 に答える 1

4

React.JS では、小道具と状態が常にオブジェクト (または null) である必要があります。プリミティブまたはケース クラス インスタンスのような単一の Scala 値を使用すると、React.JS で例外が発生します。したがって、scalajs-react では、ユーザーがあらゆる props/state 型をタイプ セーフな方法で使用できるようにするために、フードの下で単一のキーを持つオブジェクト"v"が使用されます。123つまり、直接使用する代わりに使用{v:123}されます。

コードでそのボクシングに対応する必要がある可能性があります。

さて、次のメジャー バージョン ("neo" ブランチを参照) では、コンポーネントの表現が大幅に改善され、今説明したような隠された魔法がなくなりました。v0.x は JS↔Scala コンポーネントの相互運用を容易にするように設計されていませんでしたが、neoでは明示的で明白で、できれば些細なことです。

于 2016-10-02T02:45:38.233 に答える