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 ] ]

产生错误

类型不匹配。期望有一个'Model-> Dispatch->'a'，但是得到一个'Model->（string-> unit）-> Fable.Import.React.ReactElement'类型'Msg'与字符串类型不匹配

Answer 1

基本上，QPainter会先获取属性列表，然后再获取要包含在其中的元素列表。因此，要在其中添加另一个元素，可以在该列表中添加一个项目。

例如，另一个输入：

div

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 "! " ]
          span [ ]
            [ str "How's life, "
              str model.Value
              str "?" ] ]

在不知道您尝试过什么的情况下，我不得不猜测可能会使您感到困惑的地方。但是我猜想这是F＃独特的空白敏感性。 F＃通常会将换行符视为在同一级别缩进的行之间的分隔符。在这种情况下，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!" ]，input ...和span ...是列表的项。

不过，您也可以使用分号来明确分隔列表项：

str ...

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

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

2 个答案: