Тип '' список '' не совместим с типом 'ReactElement' - PullRequest
Новая
       63

Тип '' список '' не совместим с типом 'ReactElement'

0 голосов
/ 03 мая 2020

Я пытаюсь сгенерировать несколько div из списка строк. Генерация одного div со строкой работает нормально 

div []
    [ "mytext" |> str ]

Но следующий код показывает ошибку при попытке создать список строк

"Тип" список " несовместим с типом 'ReactElement' "

  div []
    [
      myList
        |> List.map(fun f ->
            div[]
            [f |> str])]
    ]

1 Ответ

1 голос
/ 03 мая 2020

Проблема в дополнительных [] после вашего первого div.

В следующих случаях: div [] [ "hello" |> str ] у вас есть 2 списка. Первый - это пустой список свойств, второй - список дочерних элементов - с одним дочерним элементом "hello" > str.

Во втором примере у вас есть те же 2 списка, первый все еще пустой, второй содержит другой список, поэтому у вас есть список со списком реагирующих элементов.

Вам нужно просто передать список реагирующих элементов самостоятельно.

Примите во внимание следующее: 

let words = ["Hello"; "World"; ]

let mapWords = //ReactElement list
    words |> List.map (fun w -> div[] [w |> str])

div [] [ mapWords ]
|> mountById "elmish-app" //added for fable REPL

[ mapWords ] - это список со списком.

То, что вы делаете, когда у вас уже есть список реагирующих элементов, просто передаете их как второй параметр div: 

div [] mapWords
|> mountById "elmish-app"

Или, если вы не чувствуете себя отдельной функцией:

div [] (words |> List.map (fun w -> div[] [w |> str]))

Вам нужны дополнительные скобки вокруг выражения, поэтому F # знает, что все это одно выражение, именно поэтому я обычно предпочитаю использовать меньшие функции, и они также помогают поддерживать чистоту.

Примеры в Fable Repl здесь .

...