0

我用 scalajs-react 构建了一个简单的 TreeView。每个节点都包含一个文本字段。

我在 child 中写了一些文字1.1：

在此处输入图像描述

现在，如果我在1.2下面添加新1的子节点，文本就会消失，因为节点1及其所有子节点都被重新渲染：

在此处输入图像描述

在此 Javascript-Redux TreeView中添加子项时，不会重新渲染兄弟姐妹。如何使用 scalajs-react 实现这一目标？

请参阅下面的代码或GitHub 上的最小示例项目。

case class Node(text: String, children: Vector[Node])

object TreeView {
  val childNode = Node("1.1", Vector())
  val parentNode = Node("1", Vector(childNode))

  val rootNode = ScalaComponent.builder[Unit]("Node")
    .initialState(parentNode)
    .renderBackend[NodeBackend].build

  class NodeBackend($ : BackendScope[Unit, Node]) {

    def addChild =
      $.modState(
        _.copy(children = $.state.runNow().children :+ Node("1.2", Vector())))

    def render(node: Node): VdomElement = {
      val children =
        if (node.children.nonEmpty)
          node.children.toVdomArray(child => {
            val childNode = ScalaComponent.builder[Unit]("Node")
              .initialState(child)
              .renderBackend[NodeBackend].build
            childNode.withKey(child.text)()
          })
        else EmptyVdom

      <.div(
        node.text, <.input(), <.button("Add child", ^.onClick --> addChild),
        children
      )
    }
  }

  def apply() = rootNode()
4

1 回答 1

2

这更像是如何做到这一点：

case class Node(label: String, text: String, children: Vector[Node])

object TreeView {
  val childNode = Node("1.1", "", Vector.empty)
  val parentNode = Node("1", "", Vector(childNode))

  val NodeComponent = ScalaComponent.builder[Node]("Node")
    .initialStateFromProps(identity)
    .renderBackend[NodeBackend]
    .build

  class NodeBackend($: BackendScope[Node, Node]) {

    def addChild =
      $.modState(s =>
        s.copy(children = s.children :+ Node("1.2", "", Vector.empty)))

    val onTextChange: ReactEventFromInput => Callback =
      _.extract(_.target.value)(t => $.modState(_.copy(text = t)))

    def render(node: Node): VdomElement = {
      val children =
        node.children.toVdomArray(child =>
          NodeComponent.withKey(child.label)(child))

      val input =
        <.input.text(
          ^.value := node.text,
          ^.onChange ==> onTextChange)

      <.div(
        node.label, input, <.button("Add child", ^.onClick --> addChild),
        children
      )
    }
  }

  def root = NodeComponent(parentNode)
}

变化

  • 不要为每个节点创建一个新组件，而是创建一个相同组件的新实例。除其他原因外，React 总是会认为它有不同的东西并重新绘制它，从而丢失有状态组件的状态
  • 将 value 和 onChange 添加到输入中，以便 React 跟踪编辑器内容，否则编辑器更改似乎只起作用，但 React 会在需要时擦除它们。
  • 不要在回调上调用 .runNow() - 这是边缘情况的逃生舱，应始终避免

这样就行了。这仍然让我担心，因为您使用的是危险的有状态组件，因为它们是大可变变量的高级版本。你可能会发现 React 在某些情况下调用错误并在运行时丢弃你的状态。您可以无状态地以更安全的方式实现相同的目标，请查看https://japgolly.github.io/scalajs-react/#examples/state-snapshot了解其中一种实现方式。希望有帮助。

于 2017-07-19T20:37:04.590 回答