如何将HTML代码转换为Fable.React语法？报错问题求助

你的代码里的核心错误 #

• 多根元素返回问题：Fable.React的view函数只能返回单个React元素，用逗号分隔两个div不符合语法，需用外层div或fragment包裹所有根元素
• 属性列表语法错误：F#列表的元素分隔符是分号，不是逗号，多个组件属性必须用分号分隔
• text未正确引用：text并非全局可用，Fable.React中常用str作为文本节点的创建函数（需确保打开Fable.React.Props模块）
• 自闭合标签冗余：img这类自闭合标签不需要额外的空列表参数，直接写img [ 属性列表 ]即可

修正后的完整代码 #

open Fable.React
open Fable.React.Props

let view (model: Model) (dispatch: Msg -> unit) =
    div []
        [ div [ Id "templatemo_header" ]
            [ div [ Id "site_title" ]
                [ h1 []
                    [ a [ Href "/" ]
                        [ img [ Src "/Content/images/templatemo_logo.png" ] ]
                    ]
                ]
            ]
        ; div []
            [ div [ Id "templatemo_menu" ]
                [ ul []
                    [ li []
                        [ a [ Class "current"; Href "/" ]
                            [ str "Some text" ]
                        ]
                    ]
                ]
            ; div [ Id "templatemo_main" ]
                [ div [ Id "templatemo_content" ]
                    [ p [ Id "3" ]
                        [ str "Some text......" ]
                    ]
                ]
            ]
        ]

批量HTML转Fable.React的适配技巧 #

1. 调整转换器输出规则：针对你使用的HTML转Elmish工具，修改输出设置，让它自动适配Fable.React语法：
   • 用分号分隔列表元素（属性、子组件）
   • 用str代替text生成文本节点
   • 自动给多根元素添加外层包裹容器
   • 移除自闭合标签的空列表参数
2. 编辑器批量替换：用编辑器的全局替换功能快速修正批量代码：
   • 把所有, 替换为; （修正列表分隔符）
   • 把text 替换为str （修正文本节点函数）
   • 把img [...] []替换为img [...]（移除自闭合标签冗余）
3. 选择Fable专属转换工具：优先使用针对Fable.React优化的HTML转换工具，避免语法适配问题

Fable.React基础语法参考示例 #

• 带属性的基础组件

  // 带类名和ID的div
  div [ Class "card"; Id "user-card" ]
      [ str "User Profile" ]
  // 新窗口打开的链接
  a [ Href "/docs"; Target "_blank" ]
      [ str "Documentation" ]
  

• 嵌套列表结构

  ul [ Class "nav-menu" ]
      [ li [] [ str "Home" ]
      ; li [] [ a [ Href "/blog" ] [ str "Blog" ] ]
      ; li [] [ a [ Href "/contact" ] [ str "Contact" ] ]
      ]
  

• 多根元素用Fragment

  fragment []
      [ p [] [ str "First line" ]
      ; p [] [ str "Second line" ]
      ]
  

内容的提问来源于stack exchange，提问作者Miroslav Husťák