0

关于简单示例的问题：

假设我们有：

1) 3 个功能： f(d:Dependency), g(d:Dependency),h(d:Dependency)

和

2）以下函数调用图：f调用g，g调用h

问题：在h我想使用d传递的 to f，有没有办法使用 cake 模式来访问dfrom h？如果是，如何？

关于真实示例的问题：

在下面的代码中，我需要手动将Handler参数从

// TOP LEVEL , INJECTION POINT

至

//USAGE OF Handler

是否可以使用蛋糕图案代替手动穿线？如果是，如何？

package Demo

import interop.wrappers.EditableText.EditableText
import interop.wrappers.react_sortable_hoc.SortableContainer.Props
import japgolly.scalajs.react.ReactComponentC.ReqProps
import japgolly.scalajs.react._
import japgolly.scalajs.react.vdom.prefix_<^._
import interop.wrappers.react_sortable_hoc.{SortableContainer, SortableElement}

object EditableSortableListDemo {

  trait Action
  type Handler=Action=>Unit

  object CompWithState {

    case class UpdateElement(s:String) extends  Action

    class Backend($: BackendScope[Unit, String],r:Handler) {
      def handler(s: String): Unit  =
      {
        println("handler:"+s)
        $.setState(s) 
        //USAGE OF Handler <<<<<=======================================
      }

      def render(s:String) = {
        println("state:"+s)
        <.div(<.span(s),EditableText(s, handler _)())
      }
    }

    val Component = (f:Handler)=>(s:String)=>
      ReactComponentB[Unit]("EditableText with state").initialState(s).backend(new Backend(_,f))
      .renderBackend.build
  }

  // Equivalent of ({value}) => <li>{value}</li> in original demo
  val itemView: Handler=>ReqProps[String, Unit, Unit, TopNode] = (f:Handler)=> ReactComponentB[String]("liView")
    .render(d => {
      <.div(
        <.span(s"uhh ${d.props}"),
        CompWithState.Component(f)("vazzeg:"+d.props)()
      )
    })
    .build

  // As in original demo
  val sortableItem = (f:Handler)=>SortableElement.wrap(itemView(f))

  val listView = (f:Handler)=>ReactComponentB[List[String]]("listView")
    .render(d => {
      <.div(
        d.props.zipWithIndex.map {
          case (value, index) =>
            sortableItem(f)(SortableElement.Props(index = index))(value)
        }
      )
    })
    .build

  // As in original demo
  val sortableList: (Handler) => (Props) => (List[String]) => ReactComponentU_ =
      (f:Handler)=>SortableContainer.wrap(listView(f))

  // As in original SortableComponent
  class Backend(scope: BackendScope[Unit, List[String]]) {
    def render(props: Unit, items: List[String]) = {
      def handler = ??? 

     // TOP LEVEL , INJECTION POINT<<<<<<========================================

      sortableList(handler)(
        SortableContainer.Props(
          onSortEnd = p => scope.modState( l => p.updatedList(l) ),
          useDragHandle = false,
          helperClass = "react-sortable-handler"
        )
      )(items)
    }
  }

  val defaultItems = Range(0, 10).map("Item " + _).toList

  val c = ReactComponentB[Unit]("SortableContainerDemo")
    .initialState(defaultItems)
    .backend(new Backend(_))
    .render(s => s.backend.render(s.props, s.state))
    .build
}
4

0 回答 0