如何在scalsjs-react中獲得Ref的組件？

Question

此文檔https://github.com/japgolly/scalajs-react/blob/master/doc/USAGE.md#refs 有點不清楚。

我創建了小例子：「squareViewer」 showes通過點擊「廣場」

我怎樣才能在方法squareViewer.Backend.show得到裁判組件「方」？

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 
} 

編輯：Correted一個錯字，這應該現在的工作。