如何在 scalsjs-react 中获取对组件的引用？

Question

这个文档https://github.com/japgolly/scalajs-react/blob/master/doc/USAGE.md#refs 有点不清楚。

我创建了一个小例子："squareViewer" 通过点击

显示 "square"

如何在方法 squareViewer.Backend.show 中获取对组件 "square" 的引用？

import japgolly.scalajs.react._
import japgolly.scalajs.react.vdom.prefix_<^._

object squareViewer {
  class Backend($: BackendScope[Unit, Unit]) {
    def show() = Callback {
      //???
      //val r = ref to square instance
      //r.backend.show()
    }

    def render() = {
      <.div(
        <.button("Show square", ^.onClick-->show()),
        square.component.withRef("id1")()
      )
    }
  }

  val component = ReactComponentB[Unit]("squareViewer")
    .renderBackend[Backend]
    .buildU
}

object square {
  case class State(visible: Boolean)

  class Backend($: BackendScope[Unit, State]) {
    def show() = $.setState(State(true))
    def hide() = $.setState(State(false))

    def render(s: State) = {
        <.div("Yo!",
            ^.width:="100px", ^.height:="100px",
            ^.position:="absolute", ^.top:=0, ^.left:=0,
            ^.fontSize:="300%",
            ^.backgroundColor:="red",
            !s.visible ?= ^.display.none,
            ^.onClick-->hide()
        )
    }
  }

  val component = ReactComponentB[Unit]("square")
    .initialState(State(false))
    .renderBackend[Backend]
    .buildU
}

Answer 1

这应该可以解决问题：

import japgolly.scalajs.react._
import japgolly.scalajs.react.vdom.prefix_<^._

object squareViewer {
  val squareRef = Ref.to(square.component, "square")
  class Backend($: BackendScope[Unit, Unit]) {
    def show() = 
      squareRef($).map(_.backend.show()).getOrElse(Callback.empty)


    def render() = {
      <.div(
        <.button("Show square", ^.onClick-->show()),
        square.component.withRef(squareRef)()
      )
    }
  }

  val component = ReactComponentB[Unit]("squareViewer")
    .renderBackend[Backend]
    .buildU
}

object square {
  case class State(visible: Boolean)

  class Backend($: BackendScope[Unit, State]) {
    def show() = $.setState(State(true))
    def hide() = $.setState(State(false))

    def render(s: State) = {
        <.div("Yo!",
            ^.style:="width:100px;height:100px;position:absolute;top:0;left:0;font-size:300%;background-color:red;",
            !s.visible ?= ^.display.none,
            ^.onClick-->hide()
        )
    }
  }

  val component = ReactComponentB[Unit]("square")
    .initialState(State(false))
    .renderBackend[Backend]
    .buildU
}

编辑：更正了一个打字错误，现在应该可以使用了。

如何在 scalsjs-react 中获取对组件的引用？

How to get Ref to component in scalsjs-react?

scala.js

scalajs-react