F#寓言和引导模态

如何在寓言中创建模式，它应该像正常的引导模式一样工作

div[Id "userOverview"; ClassName "modal fade"; Role "dialog"; TabIndex -1.; AriaLabelleddBy "userOverviewTile"][
  div[ClassName "model-dialog"; Role "document"][
    div[ClassName "model-content"][
      div[ClassName "modal-header"][
        button[ClassName "close"; DataDismiss "modal"; AriaLabel "Close"][
          span[AriaHidden "true"][!! "$times;"]
        ]
        h4[ClassName "modal-title"; Id "userOverviewTitle"][!! "User Overview"]
      ]
      div[ClassName "modal-body"][
        table[ClassName "table table-striped table-bordered table-hover table-responsive"][
          tr[][
            td[ClassName "w200 text-rigth"][!! "E-mail"]
            td[][!! "Lorem@ipsum.co"]
          ]
          tr[][
            td[ClassName "w200 text-rigth"][!! "E-mail"]
            td[][!! "Lorem@ipsum.co"]
          ]
          tr[][
            td[ClassName "w200 text-rigth"][!! "E-mail"]
            td[][!! "Lorem@ipsum.co"]
          ]
          tr[][
            td[ClassName "w200 text-rigth"][!! "E-mail"]
            td[][!! "Lorem@ipsum.co"]
          ]
          tr[][
            td[ClassName "w200 text-rigth"][!! "E-mail"]
            td[][!! "Lorem@ipsum.co"]
          ]
          tr[][
            td[ClassName "w200 text-rigth"][!! "E-mail"]
            td[][!! "Lorem@ipsum.co"]
          ]
          tr[][
            td[ClassName "w200 text-rigth"][!! "E-mail"]
            td[][!! "Lorem@ipsum.co"]
          ]
          tr[][
            td[ClassName "w200 text-rigth"][!! "E-mail"]
            td[][!! "Lorem@ipsum.co"]
          ]
          tr[][
            td[ClassName "w200 text-rigth"][!! "E-mail"]
            td[][!! "Lorem@ipsum.co"]
          ]
          tr[][
            td[ClassName "w200 text-rigth"][!! "E-mail"]
            td[][!! "Lorem@ipsum.co"]
          ]
          tr[][
            td[ClassName "w200 text-rigth"][!! "E-mail"]
            td[][!! "Lorem@ipsum.co"]
          ]
          tr[][
            td[ClassName "w200 text-rigth"][!! "E-mail"]
            td[][!! "Lorem@ipsum.co"]
          ]
          tr[][
            td[ClassName "w200 text-rigth"][!! "E-mail"]
            td[][!! "Lorem@ipsum.co"]
          ]
        ]
      ]
      div[ClassName "modal-footer"][
        button[Type "button"; ClassName "btn btn-default btn-lg"; DataDismiss "modal"][!! "Close"]
      ]
    ]
  ]
]

在本例中，我得到以下错误

error FSHARP: The value or constructor 'AriaLabelleddBy' is not defined  
error FSHARP: The value or constructor 'DataDismiss' is not defined
error FSHARP: The value or constructor 'AriaLabel' is not defined
error FSHARP: The value or constructor 'AriaHidden' is not defined

---

还有其他方法吗？

问题是这些属性在

React.Props.htmlatr

上默认不定义，但是您可以通过在项目中实现以下内容来扩展接口

 type HTMLAttr = 
     | [<CompiledName("data-dismiss")>] DataDismiss of string
     | [<CompiledName("aria-label")>] AriaLabel of string
     interface IHTMLProp 

类型HTMLAttr=
|[]字符串的数据类型
|[]字符串的标签
接口IHTMLProp

---

很明显，你可以扩展这个联盟来满足你的需要

看起来您正在使用Suave.Expiremental？对吗？这段代码是从哪里来的？这部分代码是我写的，从html设计中创建的，我对fable或f#总体来说还是很新的，所以我不确定问题出在哪里：/你能告诉我们你打开了哪些模块吗？Fable只是一个F#->JS编译器，因此我们没有足够的关于您正在使用哪些库的信息。open Elmish open Fable.Core open Fable.Core.JsInterop open Fable.Helpers.React open Fable.Helpers.Props open Helpers open Fable.PowerPack open Fable.Fetch.Fetch_类型open Fable.Import.Browser openFable.Import.ReactBootStrapTreeView打开Fable.Import.download前两个错误看起来像是打字错误。你确定他们应该存在吗？