在與scalajs scalajs - 反應如何將一個scalajs定義的組件傳遞給一個javascript定義的組件？

Question

我的問題也正在於此： https://gist.github.com/somanythings/8c3d34de754af311d7826ea837d160b4

在使用scalajs與japgolly的scalajs反應的（https://github.com/japgolly/scalajs-react）庫。我試圖包裝扒爐網格http://griddlegriddle.github.io/Griddle/customization.html 我想要一個自定義列，並且要做到這一點，需要傳遞包含組件的columnMetadata結構。

當我這樣做時，我可以呈現一個沒有屬性的scalajs定義組件，但是如果我嘗試通過renderP訪問屬性，或者通過renderS訪問屬性，則它們都未在render函數的作用域中定義。如果我在瀏覽器中進行調試，它們的名字是綁定的，並且具有預期的值。

當我

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

打破然後$.props是不確定的

我缺少什麼？這是ReactComponentB調度中的一個簡單的打字問題。 它與https://github.com/japgolly/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 
} 

Answer 1

React.JS要求道具和狀態總是一個對象（或null）。使用單個Scala值（如原始或案例類實例）會在React.JS中導致異常。因此，在scalajs反應中，爲了允許用戶以類型安全的方式使用任何道具/狀態類型，在引擎蓋下使用具有單個鍵"v"的對象。即不是直接使用123，而是使用{v:123}。

您可能需要在代碼中適應該裝箱。

現在，在下一個主要版本（見「新」分支）中，組件的表示大大改善，使得沒有像我剛纔描述的那樣更隱藏的魔法。儘管v0.x的設計並不是爲了促進JS↔Scala組件的互操作性，但它將是明確的，明顯的，並且有希望在neo中微不足道。