Question

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

div []
    [ "mytext" |> str ]

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

“类型“列表”与类型“ ReactElement”不兼容”

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

Answer 1

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

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

在第二个示例中，您具有相同的2个列表，第一个仍为空，第二个包含另一个列表，因此您具有一个带有react元素列表的列表。

您只需要自己传递一个react元素列表。

请考虑以下内容：

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中的示例。

类型“列表”与类型“ ReactElement”不兼容

1 个答案: