scalajs-react: Как зациклить набор объектов для заполнения пользовательского интерфейса

#reactjs #scala #scalajs-react

Вопрос:

Я изучаю scalajs-реакцию. У меня есть случай использования, в котором, когда пользователь нажимает на кнопку, я получаю данные из бэкенда. Данные — это список объектов. Мне нужно отобразить каждый объект в определенной форме. Так что, по сути, я предполагаю, что это будет серия дивов.

Итак, как мне повторить набор пользовательских объектов и заполнить пользовательский интерфейс их содержимым в scalajs-react?

Поэтому я попытался поместить код ниже в существующий 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))
              
            )
    )
)

Но это приводит к ошибке: Требуется Tagmod, найден Seq[Тег[html.форма]]

1. Простой ответ заключается в том, что вы вызываете map Seq и создаете новый компонент для каждого значения, а затем помещаете его в содержащий компонент. Но, не зная более подробных сведений, трудно быть более конкретным.

Ответ №1:

Похоже, вам нужно добавить .toTagMod после map . См. раздел Коллекции в документации по VDOM