scalajs-react：如何循环对象的 Seq 以填充 UI答案

【问题标题】：scalajs-react: How to loop a Seq of objects to populate UIscalajs-react：如何循环对象的 Seq 以填充 UI
【发布时间】：2021-10-05 17:43:21
【问题描述】：

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

那么我如何迭代自定义对象的 Seq 并在 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))
              
            )
    )
)

但这会报错：Required Tagmod, found Seq[Tag[html.form]]

【问题讨论】：

简单的答案是您在Seq 上调用map 并为每个值创建一个新组件，然后将其放入包含组件中。但如果不了解更多细节，就很难更具体。

标签： reactjs scala scalajs-react

【解决方案1】：

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

【讨论】：

我使用了 toVdomArray，它按预期工作。