Question

编辑2：

        <.div(
          ApplicationCircuit.zoom(_.posts.postList).value.map {
            case p: Post ⇒
              ApplicationCircuit.connect(_.posts.postList.filterNot(x ⇒ x == p).head)(x ⇒ PostItemC(PostItemC.Props(x)))
          }
        )

这是一个奇怪的问题，但我有我的理由。当我从Post ModelProxy[Posts] case class Posts(seq: Seq[Post])中呈现每个ModelProxy[Post]时，我想改为呈现Pot，每个Post代理。这将允许我继续前进，将其包裹在zoomFlatMap中，然后轻松处理单个zoomFlatMapRW更新，删除等。

但是，我很难将对象分成这种形式，但我觉得有很多

    <.div(
      ApplicationCircuit.zoom(_.posts.postList).value.map {
        case p: Post ⇒
          ApplicationCircuit.connect(_.posts.postList.filterNot(x ⇒ x == p).head)(_.)
      }

和ApplicationCircuit.connect(_.posts.postList)(proxy ⇒ ModelProxy(????))等等，这些东西可以帮助我从那里到达那里。那就是说，我迷路了。

修改

我最近的尝试

object ApplicationCircuit
  extends Circuit[ApplicationModel]
  with ReactConnector[ApplicationModel] {

  addProcessor(new DiodeLogger[ApplicationModel]())

  override protected def initialModel: ApplicationModel = ApplicationModel(
    Posts(Seq()),
    Masthead(NavigationItems(Seq()), "JustinTampa", "JustinTampa.com", active = false)
  )

  override protected def actionHandler = composeHandlers(
    new PostHandler(zoomRW(_.posts)((m,v) ⇒ m.copy(posts = v))),
    new MastheadHandler(zoomRW(_.masthead)((m,v) ⇒ m.copy(masthead = v)))
  )

即^[a-zA-Z]\d+(\.\d+)*$

Answer 1

在渲染代码中，您应该只使用ReactConnector特征中的函数，例如wrap和connect。对于这种情况，最好connect到Posts，然后在序列中呈现单个项目。

ApplicationCircuit.connect(_.posts.postList){ model =>
  <.div(model().map(post => PostItemC(PostItemC.Props(post))))
}

然后，在PostItemC组件中，您应该实施shouldComponentUpdate方法，以便在postList更改时不会再次呈现未更改的帖子。像，

shouldComponentUpdate(scope => scope.currentProps.post ne scope.nextProps.post)

最后确保您的组件定义key属性，以便React在更新后知道如何连接帖子组件。否则，您将收到有关在组件数组中没有key的运行时警告。

这种方式当模型更改（生成新的postList）时，React将再次呈现列表，但会跳过渲染未更改的项目。

相反，如果您只有connect个别帖子，则对列表本身的更改（如添加或删除帖子）不会触发呈现。

使用scalajs Diode和带有为Posts（序列）定义的处理程序的ApplicationCircuit，我能以某种方式将它映射到ModelProxy [Post]个体吗？

编辑2：

修改

1 个答案: