Как получить ссылку на компонент в scalsjs-реагировать?

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 
} 

Edit: Correted опечатка, это должно работать.