scalajs-react:如何循环一系列对象来填充UI

Question

我正在探索scalajs-react。我有一个用例，当用户点击一个按钮时，我从后端获取数据。数据是对象的列表。我需要以某种形式显示每个对象。所以基本上我假设它是一系列的div。

那么，如何在scalajs-react中迭代一系列自定义对象并使用它们的内容填充UI呢？

所以我试着把下面的代码放到现有的div中：

<.div(
          this.employees.map( employee =>
            <.form(
              <.label("Name of the employee:",
                <.input(^.`type` := "text", ^.cls := "form-control",
                  ^.value := employee.name, ^.onChange ==> updateName)),
              <.br,
              <.label("Addresses:",
                <.input(^.`type` := "textarea", ^.rows := 100, ^.cols := 20,^.cls := "form-control",
                  ^.value := employee.addresses.mkString(","), ^.onChange ==> updateAddresses))
              
            )
    )
)

但这会给出错误:必需的标记模式，找到序列[Taghtml.form]

Answer 1

看起来您需要在map之后添加.toTagMod。请参阅the documentation on VDOM中的集合部分