如何在 Fable 的视图模型中添加 HTML 元素？

Question

我正在尝试用 Fable 编写一个简单的应用程序，但我在设置元素时遇到了问题。我无法在不破坏现有元素的情况下添加新元素。

let view model dispatch =
    div [ Class "main-container" ]
        [ input [ Class "input"
                  Value model.Value
                  OnChange (fun ev -> ev.target?value |> string |> ChangeValue |> dispatch) ]
          span [ ]
            [ str "Hello, "
              str model.Value
              str "!" ] ]

这是来自 fable.io webste 的示例。例如，我正在尝试添加另一个输入、文本、按钮或任何其他元素，但我该怎么做呢？我找不到任何需要遵守的规则。我错过了什么？

更新：

let view model dispatch =
    let digit n = digitBtn n dispatch
    div
      [ calcStyle ]
      [
        br []
        table []
            [ digit 1 ] ]

产生错误

Type mismatch. Expecting a 'Model -> Dispatch -> 'a' but given a 'Model -> (string -> unit) -> Fable.Import.React.ReactElement' The type 'Msg' does not match the type string

Answer 1

基本上，div 需要一个属性列表，然后是要包含在其中的元素列表。因此，要在其中添加另一个元素，您可以向该列表添加一个项目。

例如，另一个输入：

let view model dispatch =
    div [ Class "main-container" ]
        [ input [ Class "input"
                  Value model.Value
                  OnChange (fun ev -> ev.target?value |> string |> ChangeValue |> dispatch) ]
          span [ ]
            [ str "Hello, "
              str model.Value
              str "! " ]
          span [ ]
            [ str "How's life, "
              str model.Value
              str "?" ] ]

Answer 2

这是添加到其末尾的另一个文本元素：

let view model dispatch =
    div [ Class "main-container" ]
        [ input [ Class "input"
                  Value model.Value
                  OnChange (fun ev -> ev.target?value |> string |> ChangeValue |> dispatch) ]
          span [ ]
            [ str "Hello, "
              str model.Value
              str "!" ]
          str "Goodbye!" ]

在不知道你尝试了什么的情况下，我不得不猜测是什么让你感到困惑。但我的猜测是，这是 F# 独特的空白敏感性。 F# 通常会将换行符视为同一级别缩进的行之间的分隔符。在这种情况下，input ...、span ... 和 str ... 是列表的项目。

但是，您也可以使用分号明确分隔列表项：

let view model dispatch =
    div [ Class "main-container" ]
        [ input [ Class "input"
                  Value model.Value
                  OnChange (fun ev -> ev.target?value |> string |> ChangeValue |> dispatch) ]
          span [ ]
            [ str "Hello, "
              str model.Value
              str "!" ]; str "Goodbye!" ]

参见 more about list syntax in the F# Language Reference documentation。

如何在 Fable 的视图模型中添加 HTML 元素？

How do I add HTML elements in my view model in Fable?

f#

fable-f#