在scalajs-react中，如何将scalajs定义的组件传递给javascript定义的组件？

Question

我的问题也在这里：https://gist.github.com/somanythings/8c3d34de754af311d7826ea837d160b4

在将scalajs与japgolly的scalajs-react (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)。使用像原语或case类实例这样的单个scala值会导致React.JS中的异常。因此，在scalajs-react中，为了允许用户以类型安全的方式使用任何属性/状态类型，在幕后使用了一个具有单个键"v"的对象。也就是说，使用{v:123}而不是直接使用123。

您可能需要在代码中容纳该装箱。

现在，在下一个主要版本中(请参阅"neo“分支)，组件的表示形式得到了极大的改进，因此不再有我刚才描述的隐藏魔法。虽然v0.x不是为了促进JS↔Scala组件互操作而设计的，但它在neo中将是明确的，显而易见的，希望是微不足道的。