类型 ''a list' 与类型 'ReactElement' 不兼容

Question

我正在尝试从字符串列表中生成多个 div。使用字符串生成单个 div 工作正常

div []
    [ "mytext" |> str ]

但是下面的代码在尝试通过字符串列表生成时显示错误

"The type ''a list' is not compatible with the type 'ReactElement'"

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

Answer 1

问题是第一个 div 之后的额外 []。

在以下内容中：div [] [ "hello" |> str ] 您有 2 个列表。第一个是空的属性列表，第二个是子元素列表 - 有一个子元素 "hello" > str.

在你的第二个例子中，你有两个相同的列表，第一个仍然是空的，第二个包含另一个列表，所以你有一个包含反应元素列表的列表。

你只需要自己传递一个反应元素列表。

考虑以下因素：

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# 知道它是一个表达式，这就是为什么我通常更喜欢使用较小的函数，它们也有助于保持简洁。

寓言回复中的例子here。

类型 ''a list' 与类型 'ReactElement' 不兼容

The type ''a list' is not compatible with the type 'ReactElement'

f#

reactjs

fable-f#